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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
javascript每日必学之循环
Feb 19 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
基于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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
js变量提升深入理解
2016/09/16 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python代码xml转txt实例
2020/03/10 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
经管应届生求职信
2013/11/17 职场文书
期终自我鉴定
2014/02/17 职场文书
党支部活动策划方案
2014/08/18 职场文书
投资意向协议书
2015/01/29 职场文书
新学期开学标语2015
2015/07/16 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB