2021搭建企业级后台（Vue + TS + Element Plus ）～ 5. 引入 Element Plus 组件库 及 定义全局样式

Element Plus 官方文档

Element 官方文档

npm 安装

npm i element-ui -S

完整引入：

在 main.ts 中写入以下内容：

// 引入 Element 组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

示例：

在 App.vue 中写入以下内容：

<template>
  <div id="app">
    <h1>Hello World</h1>

    <!-- 根路由出口 -->
    <router-view/>

    <div>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>

引入成功啦 ~

---

引入样式：

• src/styles/index.scss 全局样式, 在入口模块被加载生效
• src/styles/mixin.scss 公共的 mixin 混入 (可以把重复的样式封装为 mixin 混入到复用的地方)
• src/styles/reset.scss 重复的基础样式
• src/styles/variables.scss 公共样式变量

index.scss：

// 全局样式, 在入口模块被加载生效
@import './variables.scss';

// globals
html {
  font-family: $font-family;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  // better Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: $body-bg;
}

// custom element theme
$--color-primary: $primary-color;
$--color-success: $success-color;
$--color-warning: $warning-color;
$--color-danger: $danger-color;
$--color-info: $info-color;
// change font path, required
$--font-path: '~element-ui/lib/theme-chalk/fonts';
// import element default theme
@import '~element-ui/packages/theme-chalk/src/index';
// node_modules/element-ui/packages/theme-chalk/src/common/var.scss

// overrides

// .el-menu-item, .el-submenu__title {
//   height: 50px;
//   line-height: 50px;
// }

.el-pagination {
  color: #868e96;
}

// components

.status {
  display: inline-block;
  cursor: pointer;
  width: .875rem;
  height: .875rem;
  vertical-align: middle;
  border-radius: 50%;

  &-primary {
    background: $--color-primary;
  }

  &-success {
    background: $--color-success;
  }

  &-warning {
    background: $--color-warning;
  }

  &-danger {
    background: $--color-danger;
  }

  &-info {
    background: $--color-info;
  }
}

variables.scss：

// 公共样式变量
$primary-color: #40586F;
$success-color: #51cf66;
$warning-color: #fcc419;
$danger-color: #ff6b6b;
$info-color: #868e96; // #22b8cf;

$body-bg: #E9EEF3; // #f5f5f9;

$sidebar-bg: #F8F9FB;
$navbar-bg: #F8F9FB;

$font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

加载样式：

在 main.ts 中改写为以下内容：

// 加载 Vue App根组件 router store
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入 Element 组件库
import ElementUI from 'element-ui'

// 加载全局样式
import './styles/index.scss'

Vue.use(ElementUI)

// 关闭生产环境的提示
Vue.config.productionTip = false

// 初始化 Vue 根实例
new Vue({
  // 将 router 和 store 配置到 Vue 根实例当中
  router,
  store,
  // 通过 render 方法将 App 根组件, 渲染到 #app 根节点这里(public/indexedDB.html)
  render: h => h(App)
}).$mount('#app')

共享全局变量：

向预处理器 Loader 传递选项，可以向所有 Sass/Less 样式传入共享的全局变量，新增 vue.config.js 文件：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData: `@import "~@/styles/variables.scss";`
      }
    }
  }
}

示例：

在 App.vue 中写入以下内容：

<template>
  <div id="app">
    <h1>Hello World</h1>

    <!-- 根路由出口 -->
    <router-view/>

    <p class="text">红色的文字</p>
  </div>
</template>

<style lang="scss" scoped>
.text {
  color: $danger-color;
}
</style>