欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

vue引入公共css文件的简单实现方法

程序员文章站 2022-04-17 15:30:02
...
本文主要为大家分享一篇vue 引入公共css文件的简单方法(推荐),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。

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

<template>
 <p id="app">
   <p 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>
   </p>
   <router-view></router-view>
 </p>
</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>
  <p id="app"></p>
  <!-- built files will be auto injected -->
 </body>
</html>

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

<template>
 <p id="app">
   <p 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>
   </p>
   <router-view></router-view>
 </p>
</template>

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

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

相关推荐:

PHP实现保存网站用户密码到css文件分享

自动清理js、css文件的缓存方法

jQuery中如何加载外部css文件用法详解

以上就是vue引入公共css文件的简单实现方法的详细内容,更多请关注其它相关文章!