Vue单页应用引用单独的样式文件的两种方式


Posted in Javascript onMarch 30, 2018

问题描述

对于.vue的文件来说,也是由结构、行为、样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式。下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分

引入单独的样式文件

方式一

在main.js中引入静态资源,这种方法使得该样式文件被项目中的组件所共享

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
// 此处引入静态资源
require('./assets/css/style.css')
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

方式二

在某个.vue引入样式文件

<template>
  ...
</template>

<script>
  export default {
    name: "test"
  }
</script>
<style scoped>
 @import "style.css";
</style>

文件组织形式如下:

Vue单页应用引用单独的样式文件的两种方式

项目中的应用

在我的项目中,这两个方式都是应用到的,公共的样式采用第一种方式引用,对于项目中的每一个模块的样式是采用第二种方式的,在每个模块中都是含有一个样式文件的,用来存放这个模块中需要的样式,这个时候就需要灵活一些了,如果样式比较少,或者只是某一个vue文件会用到,还是可以将css样式直接写在.vue文件的style标签中。

总结

以上所述是小编给大家介绍的Vue单页应用引用单独的样式文件的两种方式 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JScript分割字符串示例代码
Sep 04 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
js编写简单的计时器功能
Jul 15 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
vue2.0获取鼠标位置的方法
Sep 13 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 #Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 #Javascript
js将键值对字符串转为json字符串的方法
Mar 30 #Javascript
webpack4.0打包优化策略整理小结
Mar 30 #Javascript
Angular4学习笔记router的简单使用
Mar 30 #Javascript
vue.js中created方法作用
Mar 30 #Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
为你总结一些php系统类函数
2015/10/21 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
二级域名转向类
2006/11/09 Javascript
slice函数的用法 之不错的应用
2006/12/29 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
js面向对象编程总结
2017/02/16 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Anaconda入门使用总结
2018/04/05 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python文字转语音实现过程解析
2019/11/12 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
国旗下的讲话演讲稿
2014/05/08 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
大学生创业事迹材料
2014/12/30 职场文书
关于迟到的检讨书
2015/05/06 职场文书
起诉书格式范文
2015/05/20 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
海弦WR-800F
2022/04/05 无线电