Build front-end project 3 (Element Plus) from scratch

Build a lean front-end project step by step from scratch.

Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + AXIos + Pinia

Canonicalization: Eslint + Airbnb JavaScript Style + husky + Lint-staged

Package management: YARN

Historical content

Building front-end Project 1 from Scratch (Vue3+Vite+TS+Eslint+Airbnb+ Prettier)

Build Front-end Projects FROM Scratch HusKY + Lint-Staged

This chapter content

Introduce Element Plus on demand, as described on the Element Plus website.

Element-plus

sass

First, install sass

yarn add dart-sass --dev
yarn add sass --dev
Copy the code

The installation

Website address: a Vue Element | Plus 3 UI framework

yarn add element-plus
Copy the code

According to the need to import

Installing a plug-in

Install unplugin-vue-Components and unplugin-auto-import first

yarn add unplugin-vue-components --dev
yarn add unplugin-auto-import --dev
Copy the code

configuration

Add the configuration in 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()],
    }),
  ],
}
Copy the code

The vite. Config. ts file fails.

The reason is that Vite needs to build its own configuration and VUe-CLI automatically builds “@”, so ESLint does not recognize the path alias for WebPack. Add the following code to rules in the.eslintrc.js file.

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

run

Change the original tag to helloWorld.vue

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

Run the project

yarn dev
Copy the code

The modification succeeded.

Modify theme styles

Create a folder called styles\ Element under the project directory and create a style file named index.scss under the folder.

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

Customize themes when importing on demand with 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' })], }), ] });Copy the code

Run, the modification is successful.

Configuration in Chinese

// 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'); // editCopy the code

summary

Automatically import projects on demand, modify theme styles, and configure Chinese according to the ElementPlus official website configuration.