Vue项目实战(08)- css预处理器

简介: Vue项目实战(08)- css预处理器

1. 引言

在前面的章节,已经讲解了部分vue-element-admin的知识:

本文来分析vue-element-admin里面的 css预处理器

2. css预处理器

vue-element-admin的登录界面index.vue(目录:src/views/login/index.vue),可以看到里面引入的css样式是这样的:

我们可能知道stype标签是引入样式文件的意思但是后面的 langscoped就不清楚了,其实在项目里面使用到了css预处理器,下面来讲解下。

2.1 什么是css预处理器?

首先看看css预处理器定义:

css预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的css 文件,以供项目使用。css 预处理器为 css增加一些编程的特性,无需考虑浏览器的兼容性问题。css预处理语言有scss (sass) 和less等等,总之都是用来实现样式的。

我对css预处理器的理解就是为兼容各种浏览器而诞生的一种新的样式语言,经过编译最终转化为各个浏览器可识别的css文件

2.2 属性分析

可以看到引用css预处理器的模板代码如下:

<style lang="scss" scoped>
......
</style>

2.2.1 lang属性

  • lang的属性可选:scsssass)、less等等

2.2.2 scoped属性

  • scoped是指定样式的局部作用域
  • App.vue相当于根容器,因此不设置scoped,所以一般在App.vue中引用公共样式
  • 如果在其它.vue页面中用scoped,代表当前样式只作用于当前.vue页面,不作用于其它.vue页面。

2.2.3 sass和scss

细心的童鞋可能会注意到lang属性值为scss(当然也可以为less)。

scsssass的一个升级版本,两者都是用来实现样式的,只是语法有各自的不同点,那它们有什么区别和关联呢?

  1. sassscss是两个不同的东西,只是相似!
  2. sass借鉴了ruby语言的规范很严格!代码里面也没有大括号!(这对于习惯用css{}的前端人员很难适应!)
  3. 于是就出现了scss,完美兼容css,还能有sass的功能!
  4. 如果用的是webpack-simple模版用sass的话就是lang="sass"sass是没有{}括号的,如果有{}会抱错。
  5. webpack模版的话就是用lang="scss"

2.3 sass使用案例

2.3.1 安装使用

vue项目中,sass使用步骤如下:

① 先下载和安装node-sass和一些加载器:

$ cnpm install sass-loader node-sass vue-style-loader --D

② 配置webpake加载器(webpack.base.config.js ),无需手动添加,相当于是编译识别sass!

{ test: /\.scss$/, loaders: ["style", "css", "sass"] }

③ 在需要用到sass的地方添加lang=scss

<style lang="scss" scoped> 
......
<style>

一般项目在构建的时候会在package.json里面提前引入了node-sass和加载器,webpack也默认配置了加载器,具体参考项目里面的配置。

2.3.2 结构化与模块化

2.3.2.1 分散式

分散式:参考大部分的后台系统, 分散式是vue官网推荐的一种方式,就是每个模块是一个独立的.vue文件,里面包含template模版、jscss,这三种都用标签封装起来,成为一个vue实例,实例解析的时候逐步解析每个标签的内容,所以这个vue文件里面的sass是局部的,只有这个实例界面生效,一般在标签上面加scoped来局部化,去掉scoped就会变成全局样式

特点:

  • 好处:每个vue界面样式独立开发,互不影响,定位问题和改界面样式的话都比较方便,好找
  • 弊端:界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效。(可以加/deep/解决)
  • 公共样式和变量:公共样式和公共变量一般定义在外面,每个界面要用的时候都需要引入(import
2.3.2.1 集中式

集中式: 集中就是把所有模块的样式都抽离出来做独立的.scss文件,每个模块里面不写scss标签。

步骤:

  1. 写一个公共的scss文件(app.scss)把所有模块的样式按照顺序都引入一遍
  2. 先引公共变量,再引公共样式,最后引入每个模块
  3. 最后在app.vue里面或者main.js主入口里面import app.scss,最后界面就一个style标签。

特点:

  • 好处:所有样式集中管理,样式之间可以互相覆盖,可以随意覆盖子组件样式,公共变量和公共样式可以随意使用。
  • 弊端:所有模块都需要独立的样式文件,导致样式文件过多不好管理,互相覆盖容易产生bug(为了不互相覆盖,每个样式都需要写在 父样式的嵌套里面,引入的时候也需要注意顺序),
  • 公共样式和变量:公共样式和公共属性会在引入根样式文件(app.scss)里面第一个引入,这样后面引入的样式就可以随意使用。

3. element项目分析

到这里,我们对css预处理器有一个大致的了解了,并知道如何使用,下面分析vue-element-admin项目的使用情况。

首先简要描述一下项目使用的步骤:

  1. package.json引入sasssass-loader
  2. 执行命令(cnpm install),安装sass
  3. main.js,应用全局scss样式
  4. 单个界面(.vue)定义局部样式

使用详细步骤:

  • ① 首先在package.json,可以看到项目引入了sasssass-loader,并使用cnpm install就可以引入包含此的所有依赖。
  • ② 在main.js(目录:src/main.js),可以看到对样式(scss)进行了一个集中式管理, 先引公共变量,再引公共样式(注意:这里是一个全局样式):
  • ③ 回归到了我们的登录界面index.vue(目录:src/views/login/index.vue),我们可以看到里面用了两个style,具体解析如图中所述:

4. 总结

到这里,相信大家已经对css预处理有一个新的了解及知道怎么在项目中使用了。

在登录界面index.vue(目录:src/views/login/index.vue)其实还引入了normalize.css样式。

每个浏览器都有一些自带的或者共有的默认样式,或造成一些布局上的困扰,normalize.css的作用就是重置这些默认样式,使样式表现一致。为了让页面获得浏览器跨浏览器的兼容性,需要用重置文件css代码覆盖浏览器默认的样式来统一样式。本文不再详述,具体内容可以参考:https://blog.csdn.net/u013946061/article/details/108302849

本文完!

目录
相关文章
|
27天前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
11 0
|
30天前
|
前端开发 IDE JavaScript
探秘 Sass 之路:掌握强大的 CSS 预处理器(上)
探秘 Sass 之路:掌握强大的 CSS 预处理器(上)
|
27天前
|
存储 JavaScript 前端开发
从入门到项目实战 - Vue 列表渲染
从入门到项目实战 - Vue 列表渲染
41 0
|
4天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
|
4天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
6 0
|
27天前
|
JavaScript 前端开发 API
从入门到项目实战 - VUE组件跨通信:vue2 与 vue3 中实现全局事件总线
从入门到项目实战 - VUE组件跨通信:vue2 与 vue3 中实现全局事件总线
49 0
|
27天前
|
缓存 JavaScript 前端开发
从入门到项目实战 - Vue生命周期解析(vue2 与 vue3 比较)
从入门到项目实战 - Vue生命周期解析(vue2 与 vue3 比较)
105 0
|
27天前
|
JavaScript 前端开发 API
从入门到项目实战 - vue 中使用动画技术
从入门到项目实战 - vue 中使用动画技术
81 0
|
27天前
|
前端开发 JavaScript
vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播
vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播
11 0
|
30天前
|
前端开发 JavaScript 开发者
探秘 Sass 之路:掌握强大的 CSS 预处理器(下)
探秘 Sass 之路:掌握强大的 CSS 预处理器(下)

相关产品

  • 云迁移中心