vite+vue3+element-plus
1、在磁盘的某级目录下使用vite创建vue项目
npm init vite
1.1、输入项目名称,默认为“vite-project”
1.2、选择项目类型,默认“Vanilla”,选择“Vue”
1.3、选择语言类型,默认“TypeScript”,看开发习惯,自由选择
1.4、vite项目创建完成
1.5、按上图步骤启动项目
![!](https://img-blog.csdnimg.cn/direct/8d28ea75016d4cb887f0eb4326f34705.png)
2、安装element-plus
2.1、安装
npm install element-plus --save
2.2-1、按需导入(自动导入)
npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
2.2-2、按需导入(手动导入)
npm i unplugin-element-plus -D
// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
export default {
plugins: [
ElementPlus({
// options
}),
],
}
2.3、ICON图标-安装
npm install -plus/icons-vue
// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
export default {
plugins: [
ElementPlus({
// options
}),
],
}
2.3、ICON图标-自动导入
npm i -D unplugin-icons
// vite.config.ts
// elementui-plus icon图标
import Icons from 'unplugin-icons/vite'
// 自动注册图标组件
import IconsResolver from 'unplugin-icons/resolver'
export default defineConfig({
plugins: [
// ...
AutoImport({
resolvers: [
// 自动导入图标
IconsResolver({
prefix: 'icon',
}),
ElementPlusResolver()],
}),
Components({
resolvers: [
IconsResolver({
enabledCollections: ['ep'],
}),
ElementPlusResolver()
]
}),
Icons({
autoInstall: true
})
]
})
// template
<div>图标1: <i-ep-plus size="40" color="#ff0000" /></div>
<div>图标2(无效):
<el-icon size="40" color="#ff0000">
<Plus />
</el-icon>
</div>
<div>图标3:
<el-icon size="40" color="#ff0000">
<i-ep-plus />
</el-icon>
</div>