Vue3第五篇：集成Element Plus

不要在启动的情况安装，如果安装失败，停止服务，多安装几次，安装好后重启

1.安装

yarn add element-plus

2.安装unplugin-vue-components 和 unplugin-auto-import这两款插件（注意！注意！注意！：我们使用了自动按需导入的模式，就不要再手动导入了，否则会出现样式丢失的问题！）

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

3.配置自动导入，修改vite.config.js文件

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

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

4.注册，修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import 'virtual:windi.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const pinia = createPinia()
pinia.use(piniaPersist)

createApp(App).use(router).use(pinia).use(ElementPlus,{locale: zhCn,}).mount('#app')

5.Volar 插件支持：修改tsconfig.json或者jsconfig.json

 

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

5.代码提示：安装element-plus-snippets插件，代码提示不再是之前的el开头，而是ep.

7.再次提醒：注意！注意！注意！：我们使用了自动按需导入的模式，就不要再手动导入了，否则会出现样式丢失的问题！