05_ElementPlus安装过程

喜欢吃猪尾巴 发表于 2024-4-9 13:18:17

官网：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)
1.安装：运行cmd，转到我的项目的目录下\vuedemo ，执行命令:npm install element-plus --save
2.整体导入Element-plus,修改mian.js文件
import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'
//从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

//整体导入 ElementPlus 组件库
import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能
import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式

import App from './App.vue'

//路由
import router from './router'

const pinia=createPinia();
//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)

const app=createApp(App);
app.use(pinia);
app.use(ElementPlus);
app.use(router);
app.mount('#app');
3.导入图标，修改main.js
import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'
//从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

//整体导入 ElementPlus 组件库
import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能
import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标

import App from './App.vue'

//路由
import router from './router'

const pinia=createPinia();
//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)

const app=createApp(App);
app.use(pinia);

//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
for (const of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus);

app.use(router);
app.mount('#app');
------------------------------------------------------------------------------------------漂亮的分割线------------------------------------------------------------------------------------------------------
上面是整体导入ElementPlus，下面就是按需导入ElementPlus。

4.按需导入，修改main.js
先安装两个插件， unplugin-vue-components 和 unplugin-auto-import 插件
安装命令：npm install -D unplugin-vue-components unplugin-auto-import
先把之前main.js的整体导入都注释掉
import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'
//从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

/*
//整体导入 ElementPlus 组件库
import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能
import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
*/

import App from './App.vue'

//路由
import router from './router'

const pinia=createPinia();
//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)

const app=createApp(App);
app.use(pinia);

/*
//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
for (const of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus);
*/

app.use(router);
app.mount('#app');修改vite.config.js文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' //导入 node.js path

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(),

AutoImport({
 // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
 imports: ['vue'],

 resolvers: [
 ElementPlusResolver(),
 ],
}),
Components({
 resolvers: [
 ElementPlusResolver(),
 ],
}),

],
resolve: {
alias: { //配置路径别名
 '@': path.resolve(__dirname, 'src')
}
}
})
自动导入图标，安装 unplugin-icons 插件
安装命令：npm install -D unplugin-icons
修改vite.config.js文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' //导入 node.js path

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite' //图标
import IconsResolver from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),

AutoImport({
 // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
 imports: ['vue'],

 resolvers: [
 ElementPlusResolver(),
 // 自动导入图标组件
 IconsResolver(),
 ],
}),
Components({
 resolvers: [
 ElementPlusResolver(),
 // 自动注册图标组件
 IconsResolver({
 enabledCollections: ['ep'],
 }),
 ],
}),
//图标自动安装
 Icons({
 autoInstall: true,
}),

],
resolve: {
alias: { //配置路径别名
 '@': path.resolve(__dirname, 'src')
}
}
})
图标修改
<el-icon><Plus /></el-icon>
 <el-icon><Edit /></el-icon>
 <el-icon><Delete /></el-icon>
 <el-icon class="is-loading"><Loading /></el-icon>改成
<el-icon><Plus /></el-icon>
 <el-icon><Edit /></el-icon>
 <el-icon><Delete /></el-icon>
 <el-icon class="is-loading"><Loading /></el-icon> 加前缀i-ep-、或IEp和iEp。

来源:https://www.cnblogs.com/MingQiu/p/18123315
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

页: [1]

翼度科技's Archiver

05_ElementPlus安装过程