vue 引入公共css文件的简单方法(推荐)-偶像资源网

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

<template>
 <div id=\"app\">
   <div class=\'nav-box\'>
    <ul class=\'nav\'>
      <li>
       <a href=\"#/\" rel=\"external nofollow\" rel=\"external nofollow\" >home</a>
      </li>
       <li>
       <a href=\"#/odocument\" rel=\"external nofollow\" rel=\"external nofollow\" >document</a>
      </li>
       <li>
       <a href=\"#/about\" rel=\"external nofollow\" rel=\"external nofollow\" >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\" rel=\"external nofollow\" >/*引入公共样式*/
 </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=\"#/\" rel=\"external nofollow\" rel=\"external nofollow\" >home</a>
      </li>
       <li>
       <a href=\"#/odocument\" rel=\"external nofollow\" rel=\"external nofollow\" >document</a>
      </li>
       <li>
       <a href=\"#/about\" rel=\"external nofollow\" rel=\"external nofollow\" >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 引入公共css文件的简单方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

vue 引入公共css文件的简单方法(推荐)

请登录后发表评论