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实现下载远程文件并保存在本地的脚本
May 06 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
写一个Vue Popup组件
Feb 25 Javascript
JS实现简单打字测试
Jun 24 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
php数组的一些常见操作汇总
2011/07/17 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
joomla数据库操作示例代码
2016/01/06 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
JS常用算法实现代码
2016/11/14 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
pycharm安装图文教程
2017/05/02 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python netmiko模块的使用
2020/02/14 Python
毕业生的自我评价
2013/12/30 职场文书
财务主管岗位职责
2014/02/28 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书