vue3+elementPlus project construction

1. Install vue3

npm init vue@latest

Project name: Project name, default value: vue-project, you can enter the desired project name, Chinese is not recommended here.
Add TypeScript? Do you want to add TypeScript components? Default value: No.
Add JSX Support? Do you want to add JSX support? Default value: No.
Add Vue Router for Single Page Application development? Add Vue Router routing management component for single page application development? Default value: No.
Add Pinia for state management? Do you want to add Pinia components for state management? Default value: No.
Add Vitest for Unit testing? Add Vitest for unit testing? Default value: No.
Add an End-to-End Testing Solution? Default value: No, Cypress, Playwright
(Add Cypress for both Unit and End-to-End testing? Add Cypress for both Unit and End-to-End testing? Default value: No.)
Add ESLint for code quality? Add ESLint for code quality checking? Default value: No.

2. Install ElementPlus

2.1 Global introduction

### 安装 element-plus
npm install element-plus --save
### ElementPlus 全局引入 main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

2.2 Introduction on demand

#安装element-plus
npm install element-plus --save
#安装element-plus自动引入插件，这两插件的作用就是在你使用 element的某个组件的时候，不需要手动引入了，自动帮你引，很方便
npm install -D unplugin-vue-components unplugin-auto-import

Configure vite.config.ts file

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
// ------------ 需要配置elementPlus的起点 ------------
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// ------------ 需要配置elementPlus的终点 ------------
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ------------ 需要配置elementPlus的起点 ------------
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // ------------ 需要配置elementPlus的终点 ------------
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Basically, you can use it after configuring it here.

2.3 Problems encountered

After referencing some more complex components, you will find that the component only has functions and no corresponding CSS styles. When encountering this problem, there are two main ways to solve it.

The first solution:

Check whether some code similar to the one below is introduced at the top of these components. If so, just delete or comment it out.

Because the components that were automatically imported were downloaded before, there is a conflict when they are introduced here.

import { ElTable } from 'element-plus'

The second solution (recommended method):

You need to add a line of code to main.js to introduce the style of elementUI, so as to avoid the problem of introducing some components without styles.

import 'element-plus/theme-chalk/src/index.scss'

Of course, if you create a vue3 project without scss, you will be prompted with a style error. In this case, you only need to install the scss style to solve the problem.

npm install sass sass-resources-loader sass-resources-loader --save-dev