几个element-plus的UI,及环境配置

一、几个感觉还行的UI

在gitee.com里面搜索 UI、admin等关键字发现了些不错的开源UI

1、vue-element-plus-admin

element-plus官方示例 vue3
下载地址：https://gitee.com/kailong110120130/vue-element-plus-admin
演示地址：https://element-plus-admin.cn/#/login
特别： element-plus案例、可塑性强

2、geeker admin

技术 Element-Plus、 Vue3.4、TypeScript、Vite5、Pinia
下载地址： https://gitee.com/HalseySpicy/Geeker-Admin
演示地址： https://admin.spicyboy.cn/#/login
特别： 大屏

3、vue-pure-admin

技术 Vue3、 Vite、Element-Plus、TypeScript、Pinia、Tailwindcss
下载地址： https://gitee.com/yiming_chang/vue-pure-admin
演示地址： https://pure-admin.github.io/vue-pure-admin/#/login
特别： 流程拖拽设计

4、Admin.NET

技术 Vue3+Element-plus+Vite5 NET 6/8
下载地址： https://gitee.com/zuohuaijun/Admin.NET
演示地址： https://demo.adminnet.top 账号：superadmin 密码：Admin.NET++010101
特别：带后端部分功能

二、下载项目及安装

以 vue-element-plus-admin为例子。gitee直接下载ZIP就行

下载后解压。查看README.md,

1、安装开发IDE

 需要 VSCode :  [https://code.visualstudio.com/](https://code.visualstudio.com/)  

2、运行打包环境配置

  需要NodeJS :[https://nodejs.p2hp.com/](https://nodejs.p2hp.com/)

3、百度一下：nodejs 环境变量配置。

  配置node_global、node_cache 全局、缓存文件夹 等

4、VSCode中文包

 Ctrl+shift+x  收索中文，安装中文语言包：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

5、安装 pnpm:

 CMD内   npm install -g pnpm

6、VScode内 打开项目文件库

Ctrl +`   打开终端 powershell，就可以运行项目了
终端内：
pnpm install   加载第三方功能模块
pnpm dev 运行
pnpm build  打包发布

三、如果终端powershell报错：

无法加载文件 D:\Program Files\nodejs\node_global\pnpm.ps1，，因为在此系统上禁止运行脚本

1、get-ExecutionPolicy

如果返回 Restricted，说明当前禁止运行脚本。

2、将策略设置为 RemoteSigned：

Set-ExecutionPolicy RemoteSigned

3、若无管理员权限：

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

4、验证策略是否生效

get-ExecutionPolicy
输出应显示 RemoteSigned，表示设置成功。

四、二开主要文件

1、内容 \src 文件夹
2、菜单 mock\role\index.mock.ts
3、request \src\axios\index.ts
4、api请求 \src\api
5、开发环境修改：端口 、mock测试数据使用 env.dev
发布设置 env.pro
6、双语 \src\locales
7、缓存 \src\store

五、二开主要参考

5.1 UI组件:

https://element-plus.org/zh-CN/component/overview.html

5.1 icon:

预览 ： https://icon-sets.iconify.design/ant-design/thunderbolt-twotone
规则： https://icon-sets.iconify/图标组/图标名

使用：
<Icon class="ml-5px" icon="vi-ant-design:thunderbolt-twotone" :size="14" />
<Icon class="ml-5px" icon="vi-图标组:图标名" :size="14" />

六、总结

封装得太死，代码可读性差，如果要设置菜单、按钮、搜索等权限感觉需要重构的东西有点多。
不过UI效果确实可以，二开一下，不错的框架。
比如ETree就很难解读，按el-Tree自己重写一下子组件，感觉才好用。

当然main.ts里 ElementPlus 的全局引入还是需要的
import ElementPlus from ‘element-plus’
const setupAll = async () => {
const app = createApp(App)
app.use(ElementPlus).mount(‘#app’)
}