+
+
+
+
+
+
+
+
+
+
+
+1. Global installation
+
+```bash
+npm install -g @pureadmin/cli
+```
+
+2. Interactively select templates and create projects
+
+```bash
+pure create
+```
+
+[Click to view the detailed usage of @pureadmin/cli scaffolding](https://github.com/pure-admin/pure-admin-cli#pureadmincli)
+
+#### Pull from `GitHub`
+
+```bash
+git clone https://github.com/pure-admin/vue-pure-admin.git
+```
+
+#### Pulled from `Gitee`
+
+```bash
+git clone https://gitee.com/yiming_chang/vue-pure-admin.git
+```
+
+### Install dependencies
+
+```bash
+cd vue-pure-admin
+
+pnpm install
+```
+
+### Run platform
+
+```bash
+pnpm dev
+```
+
+### Project packaging
+
+```bash
+pnpm build
+```
+
+## Docker support
+
+1. Customize the image named `vue-pure-admin` (please note that there is a dot `.` at the end of the command below, indicating that the `Dockerfile` file in the current path is used, and the path can be specified according to the actual situation)
+
+```bash
+docker build -t vue-pure-admin .
+```
+
+2. Port mapping and start the `docker` container (`8080:80`: indicates that the `80` port is used in the container, and the port is forwarded to the `8080` port of the host; `pure-admin`: indicates a custom container name; `vue-pure-admin`: indicates the custom image name)
+
+```bash
+docker run -dp 8080:80 --name pure-admin vue-pure-admin
+```
+
+After operating the above two commands, open `http://localhost:8080` in the browser to preview
+
+Of course, you can also operate the `docker` project through the [Docker Desktop](https://www.docker.com/products/docker-desktop/) visual interface, as shown below
+
+
+
+
](http://godban.github.io/browsers-support-badges/)IE | [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## Maintainer
+
+[xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
+
+## License
+
+Completely free and open source
+
+[MIT © 2020-present, pure-admin](./LICENSE)
+
+## `Star`
+
+Many thanks to the kind individuals who leave a star. Your support is much appreciated :heart:
+
+[](https://github.com/pure-admin/vue-pure-admin/stargazers)
+
+## `Fork`
+
+It's so cool that you study hard :heart:
+
+[](https://github.com/pure-admin/vue-pure-admin/network/members)
diff --git a/Yi.Pure.Vue3/README.md b/Yi.Pure.Vue3/README.md
new file mode 100644
index 00000000..7eb6ff1e
--- /dev/null
+++ b/Yi.Pure.Vue3/README.md
@@ -0,0 +1,244 @@
+
+
+
+
+
+
+
+
+
+
+
+
+1. 全局安装
+
+```bash
+npm install -g @pureadmin/cli
+```
+
+2. 交互式选择模板并创建项目
+
+```bash
+pure create
+```
+
+[点我查看 @pureadmin/cli 脚手架详细用法](https://github.com/pure-admin/pure-admin-cli#pureadmincli)
+
+#### 从 `GitHub` 上拉取
+
+```bash
+git clone https://github.com/pure-admin/vue-pure-admin.git
+```
+
+#### 从 `Gitee` 上拉取
+
+```bash
+git clone https://gitee.com/yiming_chang/vue-pure-admin.git
+```
+
+### 安装依赖
+
+```bash
+cd vue-pure-admin
+
+pnpm install
+```
+
+### 启动平台
+
+```bash
+pnpm dev
+```
+
+### 项目打包
+
+```bash
+pnpm build
+```
+
+## Docker 支持
+
+1. 自定义镜像名为 `vue-pure-admin` 的镜像(请注意下面命令末尾有一个点 `.` 表示使用当前路径下的 `Dockerfile` 文件,可根据实际情况指定路径)
+
+```bash
+docker build -t vue-pure-admin .
+```
+
+2. 端口映射并启动 `docker` 容器(`8080:80`:表示在容器中使用 `80` 端口,并将该端口转发到主机的 `8080` 端口;`pure-admin`:表示自定义容器名;`vue-pure-admin`:表示自定义镜像名)
+
+```bash
+docker run -dp 8080:80 --name pure-admin vue-pure-admin
+```
+
+操作完上面两个命令后,在浏览器打开 `http://localhost:8080` 即可预览
+
+当然也可以通过 [Docker Desktop](https://www.docker.com/products/docker-desktop/) 可视化界面去操作 `docker` 项目,如下图
+
+
+
+
](http://godban.github.io/browsers-support-badges/)IE | [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| 不支持 | 最后两个版本 | 最后两个版本 | 最后两个版本 | 最后两个版本 |
+
+## 维护者
+
+[xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
+
+## 许可证
+
+完全免费开源
+
+[MIT © 2020-present, pure-admin](./LICENSE)
+
+## `Star`
+
+非常感谢留下星星的好心人,感谢您的支持 :heart:
+
+[](https://github.com/pure-admin/vue-pure-admin/stargazers)
+
+## `Fork`
+
+瞧,那些 `小哥哥` 、`小姐姐` 认真 `学习` 的样子真滴是 `哎呦不错哦` :heart:
+
+[](https://github.com/pure-admin/vue-pure-admin/network/members)
diff --git a/Yi.Pure.Vue3/build/cdn.ts b/Yi.Pure.Vue3/build/cdn.ts
new file mode 100644
index 00000000..9e4bfe04
--- /dev/null
+++ b/Yi.Pure.Vue3/build/cdn.ts
@@ -0,0 +1,60 @@
+import { Plugin as importToCDN } from "vite-plugin-cdn-import";
+
+/**
+ * @description 打包时采用`cdn`模式,仅限外网使用(默认不采用,如果需要采用cdn模式,请在 .env.production 文件,将 VITE_CDN 设置成true)
+ * 平台采用国内cdn:https://www.bootcdn.cn,当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
+ * 注意:上面提到的仅限外网使用也不是完全肯定的,如果你们公司内网部署的有相关js、css文件,也可以将下面配置对应改一下,整一套内网版cdn
+ */
+export const cdn = importToCDN({
+ //(prodUrl解释: name: 对应下面modules的name,version: 自动读取本地package.json中dependencies依赖中对应包的版本号,path: 对应下面modules的path,当然也可写完整路径,会替换prodUrl)
+ prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
+ modules: [
+ {
+ name: "vue",
+ var: "Vue",
+ path: "vue.global.prod.min.js"
+ },
+ {
+ name: "vue-router",
+ var: "VueRouter",
+ path: "vue-router.global.min.js"
+ },
+ {
+ name: "vue-i18n",
+ var: "VueI18n",
+ path: "vue-i18n.runtime.global.prod.min.js"
+ },
+ // 项目中没有直接安装vue-demi,但是pinia用到了,所以需要在引入pinia前引入vue-demi(https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77)
+ {
+ name: "vue-demi",
+ var: "VueDemi",
+ path: "index.iife.min.js"
+ },
+ {
+ name: "pinia",
+ var: "Pinia",
+ path: "pinia.iife.min.js"
+ },
+ {
+ name: "element-plus",
+ var: "ElementPlus",
+ path: "index.full.min.js",
+ css: "index.min.css"
+ },
+ {
+ name: "axios",
+ var: "axios",
+ path: "axios.min.js"
+ },
+ {
+ name: "dayjs",
+ var: "dayjs",
+ path: "dayjs.min.js"
+ },
+ {
+ name: "echarts",
+ var: "echarts",
+ path: "echarts.min.js"
+ }
+ ]
+});
diff --git a/Yi.Pure.Vue3/build/compress.ts b/Yi.Pure.Vue3/build/compress.ts
new file mode 100644
index 00000000..6178986b
--- /dev/null
+++ b/Yi.Pure.Vue3/build/compress.ts
@@ -0,0 +1,63 @@
+import type { Plugin } from "vite";
+import { isArray } from "@pureadmin/utils";
+import compressPlugin from "vite-plugin-compression";
+
+export const configCompressPlugin = (
+ compress: ViteCompression
+): Plugin | Plugin[] => {
+ if (compress === "none") return null;
+
+ const gz = {
+ // 生成的压缩包后缀
+ ext: ".gz",
+ // 体积大于threshold才会被压缩
+ threshold: 0,
+ // 默认压缩.js|mjs|json|css|html后缀文件,设置成true,压缩全部文件
+ filter: () => true,
+ // 压缩后是否删除原始文件
+ deleteOriginFile: false
+ };
+ const br = {
+ ext: ".br",
+ algorithm: "brotliCompress",
+ threshold: 0,
+ filter: () => true,
+ deleteOriginFile: false
+ };
+
+ const codeList = [
+ { k: "gzip", v: gz },
+ { k: "brotli", v: br },
+ { k: "both", v: [gz, br] }
+ ];
+
+ const plugins: Plugin[] = [];
+
+ codeList.forEach(item => {
+ if (compress.includes(item.k)) {
+ if (compress.includes("clear")) {
+ if (isArray(item.v)) {
+ item.v.forEach(vItem => {
+ plugins.push(
+ compressPlugin(Object.assign(vItem, { deleteOriginFile: true }))
+ );
+ });
+ } else {
+ plugins.push(
+ compressPlugin(Object.assign(item.v, { deleteOriginFile: true }))
+ );
+ }
+ } else {
+ if (isArray(item.v)) {
+ item.v.forEach(vItem => {
+ plugins.push(compressPlugin(vItem));
+ });
+ } else {
+ plugins.push(compressPlugin(item.v));
+ }
+ }
+ }
+ });
+
+ return plugins;
+};
diff --git a/Yi.Pure.Vue3/build/info.ts b/Yi.Pure.Vue3/build/info.ts
new file mode 100644
index 00000000..6d7c8be2
--- /dev/null
+++ b/Yi.Pure.Vue3/build/info.ts
@@ -0,0 +1,57 @@
+import type { Plugin } from "vite";
+import { getPackageSize } from "./utils";
+import dayjs, { type Dayjs } from "dayjs";
+import duration from "dayjs/plugin/duration";
+import gradientString from "gradient-string";
+import boxen, { type Options as BoxenOptions } from "boxen";
+dayjs.extend(duration);
+
+const welcomeMessage = gradientString("cyan", "magenta").multiline(
+ `您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://pure-admin.github.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
+);
+
+const boxenOptions: BoxenOptions = {
+ padding: 0.5,
+ borderColor: "cyan",
+ borderStyle: "round"
+};
+
+export function viteBuildInfo(): Plugin {
+ let config: { command: string };
+ let startTime: Dayjs;
+ let endTime: Dayjs;
+ let outDir: string;
+ return {
+ name: "vite:buildInfo",
+ configResolved(resolvedConfig) {
+ config = resolvedConfig;
+ outDir = resolvedConfig.build?.outDir ?? "dist";
+ },
+ buildStart() {
+ console.log(boxen(welcomeMessage, boxenOptions));
+ if (config.command === "build") {
+ startTime = dayjs(new Date());
+ }
+ },
+ closeBundle() {
+ if (config.command === "build") {
+ endTime = dayjs(new Date());
+ getPackageSize({
+ folder: outDir,
+ callback: (size: string) => {
+ console.log(
+ boxen(
+ gradientString("cyan", "magenta").multiline(
+ `🎉 恭喜打包完成(总用时${dayjs
+ .duration(endTime.diff(startTime))
+ .format("mm分ss秒")},打包后的大小为${size})`
+ ),
+ boxenOptions
+ )
+ );
+ }
+ });
+ }
+ }
+ };
+}
diff --git a/Yi.Pure.Vue3/build/optimize.ts b/Yi.Pure.Vue3/build/optimize.ts
new file mode 100644
index 00000000..9beb4f0e
--- /dev/null
+++ b/Yi.Pure.Vue3/build/optimize.ts
@@ -0,0 +1,63 @@
+/**
+ * 此文件作用于 `vite.config.ts` 的 `optimizeDeps.include` 依赖预构建配置项
+ * 依赖预构建,`vite` 启动时会将下面 include 里的模块,编译成 esm 格式并缓存到 node_modules/.vite 文件夹,页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存,如果没有会读取本地缓存并按需加载
+ * 尤其当您禁用浏览器缓存时(这种情况只应该发生在调试阶段)必须将对应模块加入到 include里,否则会遇到开发环境切换页面卡顿的问题(vite 会认为它是一个新的依赖包会重新加载并强制刷新页面),因为它既无法使用浏览器缓存,又没有在本地 node_modules/.vite 里缓存
+ * 温馨提示:如果您使用的第三方库是全局引入,也就是引入到 src/main.ts 文件里,就不需要再添加到 include 里了,因为 vite 会自动将它们缓存到 node_modules/.vite
+ */
+const include = [
+ "qs",
+ "mitt",
+ "xlsx",
+ "dayjs",
+ "axios",
+ "pinia",
+ "typeit",
+ "swiper",
+ "qrcode",
+ "intro.js",
+ "vue-i18n",
+ "vxe-table",
+ "vue-types",
+ "js-cookie",
+ "vue-tippy",
+ "cropperjs",
+ "jsbarcode",
+ "pinyin-pro",
+ "sortablejs",
+ "swiper/vue",
+ "mint-filter",
+ "@vueuse/core",
+ "vue3-danmaku",
+ "v-contextmenu",
+ "vue-pdf-embed",
+ "wavesurfer.js",
+ "swiper/modules",
+ "china-area-data",
+ "vue-json-pretty",
+ "@logicflow/core",
+ "@pureadmin/utils",
+ "@wangeditor/editor",
+ "responsive-storage",
+ "plus-pro-components",
+ "@howdyjs/mouse-menu",
+ "@logicflow/extension",
+ "vue-virtual-scroller",
+ "@amap/amap-jsapi-loader",
+ "el-table-infinite-scroll",
+ "vue-waterfall-plugin-next",
+ "@infectoone/vue-ganttastic",
+ "@wangeditor/editor-for-vue",
+ "vuedraggable/src/vuedraggable"
+];
+
+/**
+ * 在预构建中强制排除的依赖项
+ * 温馨提示:所有以 `@iconify-icons/` 开头引入的的本地图标模块,都应该加入到下面的 `exclude` 里,因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入,不需要预构建,直接让浏览器加载就好
+ */
+const exclude = [
+ "@iconify-icons/ep",
+ "@iconify-icons/ri",
+ "@pureadmin/theme/dist/browser-utils"
+];
+
+export { include, exclude };
diff --git a/Yi.Pure.Vue3/build/plugins.ts b/Yi.Pure.Vue3/build/plugins.ts
new file mode 100644
index 00000000..37c8278a
--- /dev/null
+++ b/Yi.Pure.Vue3/build/plugins.ts
@@ -0,0 +1,76 @@
+import { cdn } from "./cdn";
+import vue from "@vitejs/plugin-vue";
+import { pathResolve } from "./utils";
+import { viteBuildInfo } from "./info";
+import svgLoader from "vite-svg-loader";
+import type { PluginOption } from "vite";
+import checker from "vite-plugin-checker";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import Inspector from "vite-plugin-vue-inspector";
+import { configCompressPlugin } from "./compress";
+import removeNoMatch from "vite-plugin-router-warn";
+import { visualizer } from "rollup-plugin-visualizer";
+import removeConsole from "vite-plugin-remove-console";
+import { themePreprocessorPlugin } from "@pureadmin/theme";
+import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+import { genScssMultipleScopeVars } from "../src/layout/theme";
+import { vitePluginFakeServer } from "vite-plugin-fake-server";
+
+export function getPluginsList(
+ VITE_CDN: boolean,
+ VITE_COMPRESSION: ViteCompression
+): PluginOption[] {
+ const lifecycle = process.env.npm_lifecycle_event;
+ return [
+ vue(),
+ // jsx、tsx语法支持
+ vueJsx(),
+ VueI18nPlugin({
+ jitCompilation: false,
+ include: [pathResolve("../locales/**")]
+ }),
+ checker({
+ typescript: true,
+ vueTsc: true,
+ eslint: {
+ lintCommand: `eslint ${pathResolve("../{src,mock,build}/**/*.{vue,js,ts,tsx}")}`,
+ useFlatConfig: true
+ },
+ terminal: false,
+ enableBuild: false
+ }),
+ // 按下Command(⌘)+Shift(⇧),然后点击页面元素会自动打开本地IDE并跳转到对应的代码位置
+ Inspector(),
+ viteBuildInfo(),
+ /**
+ * 开发环境下移除非必要的vue-router动态路由警告No match found for location with path
+ * 非必要具体看 https://github.com/vuejs/router/issues/521 和 https://github.com/vuejs/router/issues/359
+ * vite-plugin-router-warn只在开发环境下启用,只处理vue-router文件并且只在服务启动或重启时运行一次,性能消耗可忽略不计
+ */
+ removeNoMatch(),
+ // mock支持
+ vitePluginFakeServer({
+ logger: false,
+ include: "mock",
+ infixName: false,
+ enableProd: true
+ }),
+ // 自定义主题
+ themePreprocessorPlugin({
+ scss: {
+ multipleScopeVars: genScssMultipleScopeVars(),
+ extract: true
+ }
+ }),
+ // svg组件化支持
+ svgLoader(),
+ VITE_CDN ? cdn : null,
+ configCompressPlugin(VITE_COMPRESSION),
+ // 线上环境删除console
+ removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
+ // 打包分析
+ lifecycle === "report"
+ ? visualizer({ open: true, brotliSize: true, filename: "report.html" })
+ : (null as any)
+ ];
+}
diff --git a/Yi.Pure.Vue3/build/utils.ts b/Yi.Pure.Vue3/build/utils.ts
new file mode 100644
index 00000000..27dceb79
--- /dev/null
+++ b/Yi.Pure.Vue3/build/utils.ts
@@ -0,0 +1,114 @@
+import dayjs from "dayjs";
+import { readdir, stat } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+import { sum, formatBytes } from "@pureadmin/utils";
+import {
+ name,
+ version,
+ engines,
+ dependencies,
+ devDependencies
+} from "../package.json";
+
+/** 启动`node`进程时所在工作目录的绝对路径 */
+const root: string = process.cwd();
+
+/**
+ * @description 根据可选的路径片段生成一个新的绝对路径
+ * @param dir 路径片段,默认`build`
+ * @param metaUrl 模块的完整`url`,如果在`build`目录外调用必传`import.meta.url`
+ */
+const pathResolve = (dir = ".", metaUrl = import.meta.url) => {
+ // 当前文件目录的绝对路径
+ const currentFileDir = dirname(fileURLToPath(metaUrl));
+ // build 目录的绝对路径
+ const buildDir = resolve(currentFileDir, "build");
+ // 解析的绝对路径
+ const resolvedPath = resolve(currentFileDir, dir);
+ // 检查解析的绝对路径是否在 build 目录内
+ if (resolvedPath.startsWith(buildDir)) {
+ // 在 build 目录内,返回当前文件路径
+ return fileURLToPath(metaUrl);
+ }
+ // 不在 build 目录内,返回解析后的绝对路径
+ return resolvedPath;
+};
+
+/** 设置别名 */
+const alias: Record+ 温馨提示:右键上方裁剪区可开启功能菜单 +
++ 图像大小:{{ parseInt(infos.width) }} × + {{ parseInt(infos.height) }}像素 +
++ 文件大小:{{ formatBytes(infos.size) }}({{ infos.size }} 字节) +
+{props.title}
+ )} +| setCurrentValue(key)}
+ onMouseleave={() => resetCurrentValue(key)}
+ onClick={() => selectValue(key, item)}
+ style={{
+ cursor: unref(rateDisabled) ? "auto" : "pointer",
+ textAlign: "center"
+ }}
+ key={key}
+ >
+
+ {item}
+
+ |
+ );
+ })}
+
{props.title}
+ )} +{{ t("panel.pureOverallStyle") }}
+{{ t("panel.pureThemeColor") }}
+{{ t("panel.pureLayoutModel") }}
+{{ t("panel.pureStretch") }}
+{{ t("panel.pureTagsStyle") }}
++ {{ t("panel.pureInterfaceDisplay") }} +
+,
+ config?: PureHttpRequestConfig
+ ): Promise ,
+ config?: PureHttpRequestConfig
+ ): Promise