1.Pure Admin中后台管理系统模版

2024-04-25 约 300 字预计阅读 2 分钟

Pure Admin 中后台管理系统模版

简介：

vue-pure-admin (opens new window)是一款开源完全免费且开箱即用的中后台管理系统模版。完全采用 ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发

@pureadmin/cli 脚手架

官方文档

全局安装工具

npm install -g @pureadmin/cli

使用脚手架初始化项目(交互态方式)

(base) ➜ pure create
? 请输入项目名称 (vue-pure-admin)

输入： pure-test 然后回车

? 选择一个代码托管平台下载模板 (Use arrow keys)
❯ Gitee
  Github

直接回车

? 请选择模板类型 (Use arrow keys)
❯ thin
  i18n
  tauri
  electron
  admin

模板类型

模板类型	仓库地址
`admin`	vue-pure-admin 完整版本
`thin`	vue-pure-admin 非国际化精简版本
`i18n`	vue-pure-admin 国际化精简版本
`tauri`	vue-pure-admin 的 tauri 版本
`electron`	vue-pure-admin 的 electron 版本

这里根据自己的需求自己选择即可，然后回车

项目下载自 https://gitee.com/yiming_chang/pure-admin-thin.git
✓ 下载耗时:  3.7 secs

   ╭────────────────────────────────────╮
   │                                    │
   │   Hello! 欢迎使用 @pureadmin/cli   │
   │                                    │
   ╰────────────────────────────────────╯

 🎉 已成功创建项目 pure-test
 ⬇  运行下面命令将它跑起来

 cd pure-test
 pnpm install
 pnpm dev

执行命令

 cd pure-test
 pnpm install
 pnpm dev

控制台输出：

> pure-admin-thin@5.4.0 dev /Users/wuhuaming/WebstormProjects/pure-test
> NODE_OPTIONS=--max-old-space-size=4096 vite

╭───────────────────────────────────────────────╮
│ 您好! 欢迎使用 pure-admin 开源项目            │
│ 我们为您精心准备了下面两个贴心的保姆级文档    │
│ https://yiming_chang.gitee.io/pure-admin-doc  │
│ https://pure-admin-utils.netlify.app          │
╰───────────────────────────────────────────────╯
Port 8848 is in use, trying another one...

  VITE v5.2.10  ready in 2769 ms

  ➜  Local:   http://localhost:8849/
  ➜  Network: http://192.168.1.104:8849/
  ➜  Network: http://10.13.69.81:8849/
  ➜  press h + enter to show help

我有强迫症，不喜欢输出下面的这个框

╭───────────────────────────────────────────────╮
│ 您好! 欢迎使用 pure-admin 开源项目            │
│ 我们为您精心准备了下面两个贴心的保姆级文档    │
│ https://yiming_chang.gitee.io/pure-admin-doc  │
│ https://pure-admin-utils.netlify.app          │
╰───────────────────────────────────────────────╯

关闭控制台打印日志

我们全局搜索：“我们为您精心准备了下面两个贴心的保姆级文档"发现在 ./build/info.ts 文件中然后一步一步找到

在 plugins.ts文件中有引用

import { viteBuildInfo } from "./info";

在这个文件中将他注释掉：

{
  const lifecycle = process.env.npm_lifecycle_event;
  return [
    vue(),
    // jsx、tsx语法支持
    vueJsx(),
    VueI18nPlugin({
      jitCompilation: false,
      include: [pathResolve("../locales/**")]
    }),
    // viteBuildInfo(),
    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)
  ];
}

再次启动即可删除。

其他功能还需要继续摸索ing