construcción del proyecto vue3 + elementPlus

1. Instale vue3

npm init vue@latest

Nombre del proyecto: nombre del proyecto, valor predeterminado: vue-project, puede ingresar el nombre del proyecto deseado, aquí no se recomienda el chino.
¿Agregar TypeScript? ¿Quieres agregar componentes de TypeScript? Valor predeterminado: No.
¿Agregar soporte JSX? ¿Quieres agregar soporte JSX? Valor predeterminado: No.
¿Agregar Vue Router para el desarrollo de aplicaciones de una sola página? ¿Agregar el componente de administración de enrutamiento de Vue Router para el desarrollo de aplicaciones de una sola página? Valor predeterminado: No.
¿Agregar Pinia para la gestión estatal?¿Quieres agregar componentes Pinia para la gestión estatal? Valor predeterminado: No.
¿Agregar Vitest para pruebas unitarias? ¿Agregar Vitest para pruebas unitarias? Valor predeterminado: No.
¿Agregar una solución de prueba de un extremo a otro? Valor predeterminado: No, Cypress, Playwright
(¿Agregar Cypress para las pruebas unitarias y de un extremo a otro? ¿Agregar Cypress para las pruebas unitarias y de un extremo a otro? Valor predeterminado: No. ) ¿
Agregar ESLint para la calidad del código? ¿Agregar ESLint para verificar la calidad del código? Valor predeterminado: No.

2. Instale ElementPlus

2.1 Introducción mundial

### 安装 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 Introducción bajo demanda

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

Configurar el archivo vite.config.ts

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))
    }
  }
})

Básicamente, puedes usarlo después de configurarlo aquí.

2.3 Problemas encontrados

Después de hacer referencia a algunos componentes más complejos, encontrará que el componente solo tiene funciones y no tiene estilos CSS correspondientes. Cuando se encuentra con este problema, hay dos formas principales de resolverlo.

La primera solución:

Compruebe si se introduce algún código similar al siguiente en la parte superior de estos componentes. Si es así, simplemente elimínelo o coméntelo.

Debido a que los componentes que se importaron automáticamente se descargaron antes, existe un conflicto cuando se introducen aquí.

import { ElTable } from 'element-plus'

La segunda solución (método recomendado):

Debe agregar una línea de código a main.js para introducir el estilo de elementUI, a fin de evitar el problema de introducir algunos componentes sin estilos.

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

Por supuesto, si crea un proyecto vue3 sin scss, aparecerá un error de estilo. En este caso, solo necesita instalar el estilo scss para resolver el problema.

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