@[TOC](Vue advanced use (3) - use Element UI component library and Sass css preprocessing language)

Using Element UI third party component library

1. cnpm installation element UI dependency

cnpm install element-ui --save

At package.json Element UI version information can be seen in the file

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

Two main.js File global import registration element ui component

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

// Introducing element ui components
import Element from 'element-ui'
// Introducing element ui default theme
import 'element-ui/lib/theme-chalk/index.css'
// Global registration element ui component
Vue.use(Element)

Vue.config.productionTip = false

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

3. Use Element UI component

After registering the element ui components globally, you can use any component of the element ui in any vue file
Using the table component of element ui, you can use the table component of element ui directly by using the tag on the template tag. There is no need to introduce the component and register it in components.
example:

<template>
  <div class="element-index">
    Element Table
    <el-table :data="tableData"  border class="el-table" >
          <el-table-column key="1" type="index" label="No" align="center" width="100px" :resizable='false'></el-table-column>
          <el-table-column prop="date" label="date" align="center"></el-table-column>
          <el-table-column prop="name" label="full name" align="center"></el-table-column>
          <el-table-column prop="address" label="address" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      tableData: [
        {
          date: '2020-06-19',
          name: 'Nirvana',
          address: '108 Chang'an Street, Beijing'
        },
        {
          date: '2020-06-19',
          name: 'Lss',
          address: '107 Nanjing Road, Shanghai'
        },
        {
          date: '2020-06-18',
          name: 'Lvtu',
          address: '106 chepi, Guangzhou'
        },
        {
          date: '2020-06-17',
          name: 'Wenxuan',
          address: 'No. 105, Bao'an District, Shenzhen'
        }
      ]
    }
  }
}
</script>

<style lang="css" scoped>
    .element-index{
        margin: 0;
        padding: 0;
    }
    .el-table{
        position:absolute;
        left:25%;
        width: 50%;
    }
</style>

Here is only an example of the use of El table. Parameters of other specific components of element ui can browse the official documents of element ui
https://element.eleme.cn/#/zh-CN/component/installation

Sass css preprocessing language

1. The difference among css, sass and scss
CSS refers to cascading style sheets.
Sass (Syntactically Awesome StyleSheets) is a CSS preprocessing language written by the ruby language. It has the same strict indentation style as html, and is quite different from the CSS writing specification. It does not use curly brackets and semicolons, so it is not widely accepted. Sass is an auxiliary tool to strengthen CSS, which is an extension of CSS. Based on the syntax of CSS, it adds advanced functions such as variables, nested rules, mixins, extend and inline imports, which make CSS more powerful and elegant. Using sass, as well as sass style libraries such as Compass, helps to better organize and manage style files and develop projects more efficiently, with the suffix. Sass.
SCSS (Sassy CSS), a pre-processing language of css, is a new syntax introduced by Sass 3. Its syntax is fully compatible with css 3, and inherits the powerful functions of Sass. That is, any standard css3 stylesheet is a valid scss file with the same semantics. scss requires semicolons and curly braces instead of line breaks and indents. scss is not sensitive to whitespace. In fact, like css3 syntax, its suffix is. scss.

2. Common usage of SCSS
(1) Variables

SASS Allow variables, all variables to $start.

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

If a variable needs to be embedded in a string, it must be written in {}.

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

(2) Calculation function
SASS allows you to use equations in your code:

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

(3) Nesting
SASS allows selector nesting. For example, the following CSS code:

div h1 {
　　　　color : red;
}

It can be written as:

div {
　　　　h1 {
　　　　　　color:red;
　　　　}
}

Attributes can also be nested, such as the border color attribute, which can be written as:

p {
　　　　border: {
　　　　　　color: red;
　　　　}
}

Note that the border must be followed by a colon.
Within a nested block of code, you can use the & reference parent element. For ex amp le, a:hover pseudo class can be written as:

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

(4) Notes
SASS has two annotation styles.

The standard CSS comment / * comment * /, will remain in the compiled file.

Single line comment / / comment, which is only kept in the SASS source file and is omitted after compilation.

Add an exclamation point after / * to indicate that this is an "important comment.". Even when compiled in compression mode, this line of comments is retained and can often be used to claim copyright information.

/*!
  Important notes!
*/

(5) Import file

@import command to insert an external file.

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

If you insert a. css file, it is equivalent to the import command of css.

@import "foo.css";

Insert external file

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

Use Sass in Vue

1. cnpm introduces sass dependency

cnpm install node-sass --save
cnpm install  --save  sass-loader@7.0.3

At package.json Sass version information can be seen in the file

"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. Using scss in Vue files

Using scss syntax in style modules in Vue files
Now you can rewrite the syntax in style as follows:

<style lang="scss" scoped>
    .element-index{
        margin: 0;
        padding: 0;
        .el-table{
            position:absolute;
            left:25%;
            width: 50%;
        }
    }
</style>

3. Global style
Sometimes some styles are public and need to be extracted and written in a public style file. Traditional html needs to import css style file for each html file to realize common style. vue only needs to import common style main.js Import the style file into the entry file.
Create a styles directory under the src directory of the project, and a style directory under the styles directory base.scss file

base.scss Document content:

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

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

main.js This style is introduced as a global style in the file

// Bring in global styles
import './styles/base.scss'

This allows you to use global styles directly in html tags

<template>
  <div class="sass-index">
    Element Table
    <div class="color-ff3300 font-size-32">
        //Global style
    </div>
  </div>
</template>

<script>
export default {
  name: 'sass-index',
  data () {
    return {
    }
  }
}
</script>
<style lang="scss" scoped>
    .sass-index{
        margin: 0;
        padding: 0;
    }
</style>