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


Posted in Javascript onJanuary 20, 2018

如果不想把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文件的简单方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中的path.resolve方法使用说明
Dec 08 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 #Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 #Javascript
Angular2整合其他插件的方法
Jan 20 #Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 #Javascript
javascript数组拍平方法总结
Jan 20 #Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 #Javascript
详解Node.js模板引擎Jade入门
Jan 19 #Javascript
You might like
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP-MySQL教程归纳总结
2008/06/07 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
德国苹果商店:MacTrade
2020/05/18 全球购物
J2EE模式面试题
2016/10/11 面试题
大学学习生活感言
2014/01/18 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
小学班主任评语
2014/12/29 职场文书
清明节寄语2015
2015/03/23 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
暑假打工感想
2015/08/07 职场文书
爱护公物主题班会
2015/08/17 职场文书
python 实现体质指数BMI计算
2021/05/26 Python