从零开始搭建前端项目三（Element Plus）

从零开始一步一步搭建一个精简的前端项目。

技术栈：Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + axios + Pinia

规范化：Eslint + Airbnb JavaScript Style + husky + lint-staged

包管理：yarn

历史内容

从零开始搭建前端项目一（Vue3+Vite+TS+Eslint+Airbnb+prettier）

从零开始搭建前端项目二（husky+lint-staged）

本章内容

按照Element Plus官网的按需引入的方式，引入Element Plus。

Element-plus

sass

首先安装sass

yarn add dart-sass --dev
yarn add sass --dev

安装

官网地址：一个 Vue 3 UI 框架 | Element Plus

yarn add element-plus

按需导入

安装插件

先安装unplugin-vue-components 和 unplugin-auto-import两款插件

yarn add unplugin-vue-components --dev
yarn add unplugin-auto-import --dev

配置

在vite.config.ts中添加配置

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

这时vite.config.ts文件报错。

原因是vite需要自己构建配置而vue-cli自动构建"@"，所以eslint不识别webpack的路径别名。在.eslintrc.js文件中rules中添加以下代码。

rules: { 
    'import/no-unresolved': 'off',
    'import/no-absolute-path': 'off'
}

运行

在HelloWorld.vue中将原来的标签改为

<el-button type="button" @click="count++">count is: {{ count }}</el-button>

运行项目

yarn dev

修改成功。

修改主题样式

在项目目录下新建文件夹styles\element，在文件夹下新建样式文件index.scss。

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #01bfbf,
    ),
  )
);

用vite按需导入时自定义主题。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
  ]
});

运行，修改成功。

配置中文

// main.ts
import { createApp } from 'vue';

import ElementPlus from 'element-plus';                  // ++
import zhCn from 'element-plus/es/locale/lang/zh-cn';    // ++

import App from './App.vue';

createApp(App).use(ElementPlus, { zhCn, size: 'small' }).mount('#app');// edit

小结

按照ElementPlus官网配置自动按需引入项目，修改主题样式，并配置中文。