vue 引入公共css文件

最新推荐文章于 2024-05-11 01:03:10 发布

七月的烂番茄

最新推荐文章于 2024-05-11 01:03:10 发布

阅读量6.3k

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/Black_Tmt/article/details/78967181

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过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>

七月的烂番茄

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue 引入公共css文件

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

扫一扫