vue官网安装最新vue版本
npm init vue@latest
VScode安装这两个插件可以很好的Element Plus代码提示
Element Plus 按需自动导入
https://element-plus.gitee.io/zh-CN/
npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
Element Icon 按需自动导入
npm install @element-plus/icons-vue
安装后无法使用,继续安装以下插件
npm i unplugin-icons -D
vite.config.ts配置
import { fileURLToPath, URL } from 'node:url'
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'
// icon
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
, AutoImport({
resolvers: [ // 自动导入图标组件
IconsResolver({
prefix: 'Icon',
}),
ElementPlusResolver()
],
}),
Components({
resolvers: [ // 自动注册图标组件
IconsResolver({
enabledCollections: ['ep'],
})
, ElementPlusResolver()
],
}),
Icons({
autoInstall: true,
}),
],
server: {
host: '0.0.0.0', // ip
port: 8080,
hmr: true, // 热启动
open: true // 自动打开浏览器
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
成功引入