2.Vue引入ElementUI、sass插件

Vue引入 Sass

视频演示地址：https://www.bilibili.com/video/BV1CiepejEN6/?vd_source=0f4eae2845bd3b24b877e4586ffda69a
安装sass相关插件

（我的node环境是node16.13.1，测试过只有这两个版本的sass和和sass-loader可以用）

npm install sass@1.26.5 --save-dev
npm install sass-loader@8.0.2 --save-dev

想要在vue-cli中全局使用 scss的全局变量和 @mixin样式混入，需要安装插件

npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

配置vue.config.js，同时在对应的路径下创建variable.scss，mixin.scss

variable.scss用来放全局的样式变量，mixin.scss 文件，可以函数式定义样式，类似用函数方式去复用样式的书写

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        // 路径根据具体需求更改
        path.resolve(__dirname, 'src/assets/styles/variables.scss'),
        path.resolve(__dirname, 'src/assets/styles/mixin.scss')
      ]
    }
  }
}

variable.scss 文件内容

$--color-primary: #468fff;

$--color-primary-active: #69a5ff;

@mixin与@include实现css编程式风格，mixin.scss 文件，可以函数式定义样式

mixin.scss 文件内容，格式：@mixin 函数名($参数名: 默认值)

@mixin flex($justify-content: center, $align-center: center, $flex-direction: row){
  display: flex;
  justify-content: $justify-content;
  align-items: $align-center;
  flex-direction: $flex-direction;
}

测试样式变量是否生效

xxx.vue 文件中直接使用该变量，页面中引入样式测试

<style lang="scss" scoped>
.main-wrap {
    background: $--color-primary;
}
</style>

测试样式函数是否生效

xxx.vue下，使用 @include 进行引用即可

<style lang="scss" scoped>
    .main-wrap {
        height: 100px;
        width: 100px;
        background: $--color-primary;

        @include flex(center,center,row); //子元素居中布局
        .main-wrap1{
            height: 50px;
            width: 50px;
            background: $--color-primary-active;
            
        }
        
    }
</style>

Vue引入ElementUI

官网有安装教程，先在项目中安装element-ui包

npm i element-ui -S

main.js（入口文件），加入elementui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在vue中，测试引入elementui控件