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 相关文章推荐
按钮JS复制文本框和表格的代码
Apr 01 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
js图片上传的封装代码
Aug 01 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
JavaScript实现连连看连线算法
Jan 05 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
xml+php动态载入与分页
2006/10/09 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
js实现无缝滚动图
2017/02/22 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python文本数据相似度的度量
2018/03/12 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
wxpython布局的实现方法
2019/11/01 Python
python的列表List求均值和中位数实例
2020/03/03 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
管理心得体会
2013/12/28 职场文书
阳光体育活动总结
2014/04/30 职场文书
元宵节晚会主持词
2015/07/01 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
python源码剖析之PyObject详解
2021/05/18 Python