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 相关文章推荐
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
javascript连续赋值问题
Jul 08 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
简单实现js拖拽效果
Jul 25 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 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
PDO::_construct讲解
2019/01/27 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JS实现分页导航效果
2020/02/19 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python之mock模块基本使用方法详解
2019/06/27 Python
django页面跳转问题及注意事项
2019/07/18 Python
tensorboard显示空白的解决
2020/02/15 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
授权委托书怎么写
2014/04/03 职场文书
Python的三个重要函数详解
2022/01/18 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python