vue-pure-admin搭建流程

Vue pure admin 是基于 Vue 3 的轻量级响应式管理模板，旨在帮助开发者快速构建高性能的后台管理界面。它采用了现代开发工具和最佳实践，如 Vite 进行构建和优化，具备灵活性和易用性。

其主要特点包括：

Vue 3 组合式 API利用最新的 Vue 3 特性，更好地组织代码。
Tailwind CSS使用实用优先的 CSS 框架，确保响应式和视觉美观的用户界面。
Pinia使用 Pinia 替代 Vuex，提供更简单、直观的状态管理 API。
Typescript 支持支持静态类型，提升代码的可维护性和质量。
轻量且高效默认设计为高性能，依赖项较少。
主题定制化提供丰富的主题和布局定制选项。
暗黑模式可以轻松切换浅色和深色主题，以适应用户偏好。

开发文档：

https://pure-admin.github.io/pure-admin-doc/

1、拉取代码（现有的）

git clone https://github.com/pure-admin/vue-pure-admin.git

2、电脑全局安装prue脚手架

# mac安装

sudo npm install -g @pureadmin/cli

#windows安装

npm install -g @pureadmin/cli

1）安装脚手架需要升级node版本为18以上

由于现有的oms系统使用node版本为16.17.0（npm版本为8.15.0),所以需要兼容两个版本的node，那么安装nvm进行node版本管理，在需要使用什么版本时直接切换到相应的node版本，这样系统直接不会互相影响

安装nvm和使用方法如下：

方法一：

安装 Homebrew（如果已经安装直接跳过）

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

在终端中执行以下命令安装nvm：

brew install nvm

安装完成后，您可以使用nvm --version命令来检查nvm是否成功安装，如果 nvm 安装成功，你应该会看到版本号。

虽然可以通过Homebrew安装nvm，但官方推荐使用 nvm 的安装脚本来安装。这是因为Homebrew安装的nvm可能在配置方面稍有不同。

方法二：

使用安装脚本安装 nvm，打开终端运行以下命令行

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

安装脚本会将 nvm 安装到你的home目录中，并在你的shell配置文件中添加必要的配置。

配置 nvm

完成安装后，需要重新加载你的shell配置文件，或者你可以手动将以下内容添加到你的shell配置文件中。

对于 bash，将以下内容添加到 ~/.bash_profile 或 ~/.bashrc 文件中（在访达直接前往该文件目录）：

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

对于 zsh（MacOS Catalina 及更新版本默认使用的shell），将以下内容添加到 ~/.zshrc 文件中：

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

然后，重新加载配置文件：

对于 bash：

source ~/.bash_profile

对于 zsh：

source ~/.zshrc

验证 nvm 安装运行nvm --version命令来验证 nvm 是否安装成功，如果 nvm 安装成功，你应该会看到版本号。
安装和管理Node.js版本使用 nvm 你可以安装不同的Node.js版本。以下是一些常用命令：

# 安装最新的LTS版本 
nvm install --lts 
# 安装特定版本 
nvm install 16.17.0 
# 列出已经安装的Node.js版本 
nvm ls 
# 列出所有可用的Node.js版本 
nvm ls-remote 
# 使用特定版本的Node.js 
nvm use 16.17.0 
# 设置默认版本（默认版本将在每次新终端会话中使用） 
nvm alias default 14.17.0 
# 卸载某个版本的Node.js 
nvm uninstall 16.17.0

验证Node.js版本你可以通过以下命令验证当前使用的Node.js版本：

node -v

# 验证npm版本，每个node版本会相对应当前的npm版本 npm -v

切换到相应版本的node，就可以全局安装prue脚手架了

安装成功后，运行pure -v就可以看到版本号，表示安装成功

3、安装项目所需依赖

pnpm install

会发现报错了：zsh: command not found: pnpm

解决办法：

# 全局安装pnpm（windows电脑去掉sudo） sudo npm install -g pnpm

执行pnpm -v显示出版本号后即安装成功，再次执行pnpm install即可成功下载依赖

4、启动项目

pnpm dev

运行成功后打开http://localhost:8848/即可

5、打包项目

pnpm build

6、如果需要重新搭建

pure create

就根据对应提示选择是否需要安装了（跟vue脚手架类似）

项目远程地址是指向开源框架的，我们需要改成我们自己的远程地址，不然推代码就推不上去了

项目配置

├── .github // GitHub 专用的配置目录，我们项目放到gitlab的可以不需要此文件夹 
├── .husky // Husky 工具使用的 Git 钩子管理目录，用于存放各种 Git 操作相关的钩子脚本（推代码之前自动化检验） 
├── .vscode // 项目配置 VS Code 编辑器的调试配置、代码格式化、扩展推荐等 
├── build // 包含构建配置相关的文件，比如打包、构建脚本等 
├── locales // 存放项目国际化相关的内容（翻译） 
├── mock // 用于存放模拟数据的文件夹 
├── public // 用于存放公共资源的文件夹，比如静态文件（如图片、favicon 等）。这里的文件不会经过打包，直接被复制到构建目录 
├── src // 项目的主要源代码文件夹，包含应用的业务逻辑、组件、路由等 
  ├── api // 存放接口文件 
  ├── assets // 存放静态资源，如图片、字体、样式文件 
  ├── components // 存放项目中可复用的 Vue 组件。这些组件可以在不同页面或模块中复用。 
  ├── config // 存放了公共方法 
  ├── directives // 存放 Vue 项目的自定义指令 
  ├── layout // 存放页面的布局组件，通常包含导航栏、侧边栏等，用于组织页面的整体布局。 
  ├── plugins // 存放项目中的插件 
  ├── router // 存放 Vue Router 配置，负责管理应用的路由规则，决定用户访问哪个页面 
   └── index.ts // 定义路由配置文件，包含每个页面的路径和相应的组件。 
  ├── store // 存放项目的状态管理文件，通常使用 Pinia 代替vueX进行全局状态管理。 
   └── index.ts // 状态管理的入口文件，定义应用的全局状态树。 
  ├── style // 存放全局样式和变量文件，比如 CSS/SCSS 全局配置、主题样式等。 
  ├── utils // 存放工具函数和辅助方法，如 API 请求封装、数据处理、常用工具库等。 
  ├── views // 存放各个页面组件，每个 Vue 文件对应一个页面或页面模块。 
  ├── app.vue // 应用的根组件，所有页面组件都会通过此组件渲染出来。 
  └── main.ts // Vue 项目的入口文件，在这里初始化应用，挂载到 index.html 中的 #app 节点。 
├── types // 存放全局的类型声明、接口、类型扩展等 
├── .browserslistrc // 定义项目需要支持的浏览器版本及兼容性要求 
├── .dockerignore // Docker 在构建镜像时，哪些文件和目录不需要被复制到镜像中 
├── .editorconfig // 定义了缩进方式、字符编码、文件末尾换行等编辑器行为，帮助团队在不同的代码编辑器和 IDE 中保持一致的代码风格 
├── .env // 用于定义环境变量。可以根据不同的环境设置不同的 API 接口地址或配置选项。 
├── .env.development // 存放开发环境的变量配置。 
├── .env.production // 存放生产环境的变量配置。 
├── .env.staging // 存放预发布环境的变量配置。 
├── .gitattributes // 用于设置 Git 处理文件的方式（如换行符、二进制文件）。 
├── .gitignore // 定义 Git 不需要追踪的文件或目录 
├── .gitpod.yml // 用于配置 Gitpod 工作区，定义项目开发环境的初始化任务、依赖安装等。 
├── .lintstagedrc // 配置 Lint-staged，在 Git 提交时只对变更文件执行代码检查和格式化。 
├── .markdownlint.json // 定义了 Markdown 文件的格式化规则，确保文档书写时风格一致 
├── .npmrc // 存放一些 npm 配置选项，控制 npm 的行为，比如镜像源设置、安装策略、缓存配置等。 
├── .nvmrc // 指定项目的 Node.js 版本，确保团队开发环境一致 
├── .prettierignore // 用于告诉 Prettier 哪些文件或目录不需要进行格式化 
├── .prettierrc.js // Prettier 的配置文件，代码格式化 
├── .stylelintignore // 用于忽略特定样式文件不进行 Stylelint 检查 
├── commitlint.config.js // 配置 Commitlint，确保提交信息符合规范 
├── Dockerfile // 定义项目的 Docker 镜像构建过程 
├── eslint.config.js // 配置 ESLint，检查 TypeScript 代码质量。 
├── index.html // 项目的根 HTML 文件，作为前端应用的入口 
├── LICENSE // 项目的许可证文件，规定项目的使用和分发规则。 
├── package.json // 项目的元数据文件，定义了项目的基本信息、依赖库、脚本命令等 
├── pnpm-lock.yaml // pnpm 的锁文件，确保项目依赖版本一致。类似于 npm 的 package-lock.json 
├── postcss.config.js // 配置 PostCSS，处理 CSS 文件，添加浏览器前缀等功能。 
├── README.md // 项目的说明文件，包含项目简介、安装步骤、使用方法等信息 
├── stylelint.config.js // 配置 Stylelint，检查样式文件格式。 
├── tailwind.config.ts // 配置 Tailwind CSS 的自定义设置，如主题颜色、字体等 
├── tsconfig.json // TypeScript 的配置文件，用于定义项目中的 TypeScript 编译选项 
└── vite.config.ts // Vite 的配置文件。用于定义项目的打包和开发配置，比如别名、插件、代理等

有精简版

弊端：

移动端：

样式并不是完全兼容

表格没办法左右滑动

pnpm和npm的差异：（pnpm节省磁盘空间和提升安装速度）

1、依赖管理：虽然 npm 和 pnpm 都支持相同的依赖管理，但 pnpm 使用的是符号链接和特殊的 node_modules 结构，而 npm 则使用传统的 node_modules 结构。使用 npm 安装依赖后，项目会生成 node_modules 文件夹，供项目使用。

2、package-lock.json：npm 会生成 package-lock.json 文件，它的作用类似于 pnpm-lock.yaml，用于锁定依赖版本。如果你使用 npm 进行依赖管理，请确保团队成员也使用相同的工具（npm），以避免锁文件冲突。

3、兼容性：大多数情况下，pnpm 和 npm 的安装命令和项目运行方式是兼容的。如果你的项目没有使用 pnpm 特有的功能，切换到 npm 应该不会遇到问题。

Pinia 与 Vuex 的差异

1、更轻量和模块化

Pinia 是一个轻量的状态管理库，设计初衷就是简洁和易用。它在 API 设计上比 Vuex 更加简化，不需要像 Vuex 那样显式地定义 mutations，并且直接操作状态，减少了繁琐的语法和配置。
Vuex 相对比较复杂，特别是 Vuex 3.x 或 Vuex 4.x 版本，它要求定义 state、mutations、actions、getters，并且通过 mutations 修改状态。

2、API 设计更加直观

Pinia 的 API 设计比较灵活，使用更加现代化的 setup 函数，支持 TypeScript 更加友好。你可以直接定义 state，并通过 actions 修改状态，不再强制使用 mutations。
Vuex 则需要将状态修改通过 mutations 进行，增加了一些冗余的步骤。

3、开发体验更好

Pinia 支持热重载（Hot Module Replacement），可以在开发过程中实时修改状态而不需要刷新页面，提升了开发效率。
Vuex 也支持热重载，但是由于其较为复杂的结构，调试和状态追踪可能稍显繁琐。

4、模块支持

Pinia 天然支持模块化，每个状态都是独立的 store，不需要像 Vuex 那样通过模块系统去注册。
Vuex 需要通过 modules 系统进行模块化管理，这可能让配置变得较为复杂。