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 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
JS给按钮添加跳转功能类似a标签
May 30 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
js实现的在本地预览图片功能示例
Nov 09 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
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python入门篇之字典
2014/10/17 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
祖国在我心中演讲稿450字
2014/09/05 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
导游词之临安白水涧
2019/11/05 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
SQL写法--行行比较
2021/08/23 SQL Server
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫