使用 element ui 和 sass 进行后台页面的搭建

安装 Element UI 和 Sass
在项目中使用 Element UI 和 Sass 首先需要安装它们。可以通过 npm 或者 yarn 来进行安装。

使用 npm 安装：

npm install element-ui sass-loader node-sass --save

使用 yarn 安装：

yarn add element-ui sass-loader node-sass

引入 Element UI 和 Sass
在项目中需要在入口文件 main.js 中引入 Element UI 和 Sass。

在 main.js 中引入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

在 main.js 中引入 Sass：

import Vue from 'vue'
import App from './App.vue'
import './assets/css/main.scss'

new Vue({
  render: h => h(App),
}).$mount('#app')

编写 Sass 样式
在项目中使用 Sass 可以让样式代码更加简洁、易读和易于维护。

在项目中创建一个 main.scss 文件，里面包含了所有的样式代码。可以按照模块划分样式代码，例如：

// _variables.scss
$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$error-color: #F56C6C;

// _button.scss
.el-button {
  background-color: $primary-color;
  color: #fff;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
  
  &.is-loading {
    background-color: lighten($primary-color, 10%);
  }
}

在 main.scss 中引入所有的模块：

@import 'variables';
@import 'button';
@import 'input';
@import 'table';
// ...

使用 Element UI 组件
在项目中使用 Element UI 组件可以极大地提高开发效率和代码质量。

例如，在项目中使用 el-table 组件可以快速地创建一个数据表格：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市朝阳区' },
        { name: '李四', age: 20, address: '上海市浦东新区' },
        { name: '王五', age: 22, address: '广州市天河区' },
      ],
    }
  },
}
</script>

参考资料
Element UI 中文文档：https://element.eleme.cn/#/zh-CN
Sass 中文文档：https://www.sass.hk/docs/