不要在启动的情况安装,如果安装失败,停止服务,多安装几次,安装好后重启
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.再次提醒:注意!注意!注意!:我们使用了自动按需导入的模式,就不要再手动导入了,否则会出现样式丢失的问题!