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

最新推荐文章于 2024-04-23 17:37:36 发布

Nirvana_lss

最新推荐文章于 2024-04-23 17:37:36 发布

阅读量1.9k

点赞数 1

分类专栏： Vue 文章标签： vue.js sass css html javascript

本文链接：https://blog.csdn.net/Nirvana_lss/article/details/106858076

版权

Vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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: '<App/>'
})

3.使用Element UI组件

通过上面全局注册element ui组件之后，可以在任意的vue文件使用element ui的任何组件
使用element ui的table组件，直接在template标签上使用标签就可以使用element ui的table组件，无需再在引入组件并在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="序号" align="center" width="100px" :resizable='false'></el-table-column>
          <el-table-column prop="date" label="日期" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" 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号'
        },
        {
          date: '2020-06-19',
          name: 'Lss',
          address: '上海市南京路107号'
        },
        {
          date: '2020-06-18',
          name: 'Lvtu',
          address: '广州市车陂106号'
        },
        {
          date: '2020-06-17',
          name: 'Wenxuan',
          address: '深圳市宝安区105号'
        }
      ]
    }
  }
}
</script>

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

在这里插入图片描述
这里只举例介绍 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  sass-loader@7.0.3

在 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里面的语法改写如下：

<style lang="scss" scoped>
    .element-index{
        margin: 0;
        padding: 0;
        .el-table{
            position:absolute;
            left:25%;
            width: 50%;
        }
    }
</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标签当中使用全局样式

<template>
  <div class="sass-index">
    Element Table
    <div class="color-ff3300 font-size-32">
        全局样式
    </div>
  </div>
</template>

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

在这里插入图片描述

最后，如果本篇文章对您有所帮助，可以评论或点赞支持一下哦，感谢感谢！
在这里插入图片描述

Nirvana_lss

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue进阶使用(三)---使用Element UI组件库及Sass预处理语言

@[TOC](Vue进阶使用(三)—使用Element UI组件库及Sass css预处理语言)使用Element UI第三方组件库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" }
复制链接

扫一扫