vue 引入公共css文件

通过vue-cli 创建好项目目录后如果不想把css写在单文件组件里如这样：<template><div id="app"><div class='nav-box'><ul class='nav'><li><a href="#/">home</a></li>

七月的烂番茄

6382人浏览 · 2018-01-04 09:00:13

七月的烂番茄 · 2018-01-04 09:00:13 发布

通过vue-cli 创建好项目目录后

如果不想把css写在单文件组件里如这样：

<template>
  <div id="app">
     <div class='nav-box'>
        <ul class='nav'>
            <li>
              <a href="#/">home</a>
            </li>
              <li>
              <a href="#/odocument">document</a>
            </li>
             <li>
              <a href="#/about">about</a>
            </li>
        </ul>
     </div>
     <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app{
     text-align:center;
     color:#2c3e50;
     margin-top:60px;
}
</style>

可以将css样式写在外部，再通过下面三种方法中的一种引入：

1、在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。

import Vue from 'vue'
import App from './App' // 引入App这个组件
import router from './router' /* 引入路由配置 */
import axios from 'axios'
import '@/assets/css/reset.css'/*引入公共样式*/

2、在index.html中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>y</title>
    <link rel="stylesheet" type="text/css" href="src/assets/css/reset.css">/*引入公共样式*/
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3、在app.vue中引入，但是这样引入有一个问题，就是在index.html的HEADH上会多出一个空的

<template>
  <div id="app">
     <div class='nav-box'>
        <ul class='nav'>
            <li>
              <a href="#/">home</a>
            </li>
              <li>
              <a href="#/odocument">document</a>
            </li>
             <li>
              <a href="#/about">about</a>
            </li>
        </ul>
     </div>
     <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
   @import './assets/css/reset.css'; /*引入公共样式*/
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^