Vue进阶使用(三)---使用Element UI组件库及Sass预处理语言

前言：做一个有梦想的程序猿！

使用Element UI第三方组件库

Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端元组件库，由饿了么前端团队推出。它并不依赖于Vue，却是一个十分适合Vue项目的框架。

1. cnpm安装element-ui依赖

cnpm install element-ui --save

在 package.json 文件可看到element-ui版本信息，

 "dependencies": {
    "element-ui": "^2.13.2",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

当然你也可以先在package.json文件中指定element-ui版本，然后通过

cnpm install

命令进行安装。

2. main.js文件全局引入注册element ui组件

// 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'

// 引入element ui组件
import Element from 'element-ui'
// 引入element ui默认主题
import 'element-ui/lib/theme-chalk/index.css'
// 全局注册element ui组件
Vue.use(Element)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

3.使用Element UI组件

通过上面全局注册element ui组件之后，可以在任意的vue文件使用element ui的任何组件
使用element ui的table组件，直接在template标签上使用标签就可以使用element ui的table组件，无需再在引入组件并在components里面注册。
example:

这里只举例介绍 el-table 使用，element ui其他具体组件的参数可自行浏览element ui的官方文档
https://element.eleme.cn/#/zh-CN/component/installation

sass css预处理语言

1、css、sass、scss的区别
CSS 指层叠样式表 (Cascading Style Sheets)。
Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目，其后缀是.sass。
SCSS (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。

2. SCSS常用用法
（1）变量

SASS允许使用变量，所有变量以$开头。

$blue : #1875e7;　
　　div {
　　　color : $blue;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

（2）计算功能
SASS允许在代码中使用算式：

$var: 50px;
　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

（3）嵌套
SASS允许选择器嵌套。比如，下面的CSS代码：

div h1 {
　　　　color : red;
}

可以写成：

div {
　　　　h1 {
　　　　　　color:red;
　　　　}
}

属性也可以嵌套，比如border-color属性，可以写成：

p {
　　　　border: {
　　　　　　color: red;
　　　　}
}

注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a {
　　　&:hover { color: #ffb3ff; }
}

（4）注释
SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
  重要注释！
*/

（5）引入文件

@import命令，用来插入外部文件。

@import "path/filename.scss";
@import "path/filename";

如果插入的是.css文件，则等同于css的import命令。

@import "foo.css";

插入外部文件

@import "http://foo.com/bar";

Vue中使用Sass

1. cnpm引入sass依赖

cnpm install node-sass --save
cnpm install  --save  [email protected]

在 package.json 文件可看到Sass版本信息

"dependencies": {
    "element-ui": "^2.13.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.0.3",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

2. Vue文件中使用scss

在Vue文件中style模块中使用scss语法
现在可以将style里面的语法改写如下：

3. 全局样式
有时候有些样式是公用的，需要抽出来写在一个公共样式文件中去。传统的html需要为每个html文件引入css样式文件来实现公用样式，vue引入公用样式只需要要main.js入口文件引入样式文件即可。
在项目src目录下创建一个styles目录，styles目录下创建一个base.scss文件

base.scss文件内容：

$color-ff3300: #ff3300;
$font-size-32: 32px;

.color-ff3300{
    color: $color-ff3300;
}
.color-ff3300{
    font-size: $font-size-32;
}

main.js文件中引入这个样式作为全局样式

// 引入全局样式
import './styles/base.scss'

这样就可以直接在html标签当中使用全局样式

最后，如果本篇文章对您有所帮助，可以评论或点赞支持一下哦，感谢感谢！