从0-1实战演练后台管理系统 （2）从零开始：Pure Admin 环境搭建完全指南，小白也能轻松掌握！

在开始使用Pure Admin之前，我们需要先了解一下Pure Admin是什么?

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

Pure Admin与其他管理系统有什么优势 ？

• Pure Admin采用最新技术栈：在保证稳定的同时基于 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等最新技术栈开发。
• Pure Admin采用完善的热重载打包优化方案：无论应用程序大小如何，始终极快的模块热重载（HMR），内置完善的打包优化方案。
• Pure Admin内置丰富组件工具函数，简单易上手：使用单文件组件语法

源码地址：

pure-admin

文档地址：

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

1、 安装Node 版本

node 版本要求：不得小于 18.18.0 推荐安装： v20.17.0 长期维护版本

• 如果还没有安装，请前往下载安装：

node 官方网站: https://nodejs.org/en/download/package-manager

• 如果已安装，可输入命令查看版本

node -v

2、安装 pnpm

pnpm 版本要求：pnpm 版本应不小于 9

如果您还没安装 pnpm，请执行下面命令进行安装：

windows :

npm install -g pnpm

mac:

sudo npm install -g pnpm

3、安装IDE VSCODE 及插件

一键安装平台推荐的 vscode 插件，安装方法如下图:

4、设置扩展程序或 vscode 编辑器的一些属性

• vue 代码片段提示

在 .vue 文件输入 vue 即可看到如下图的选项，选择 Vue3.X 即可生成

• 提示
  如果输入 vue 没有代码片段提示，请稍等一下 vscode 正在反应，或者可以来到 .vscode/vue3.0.code-snippets、.vscode/vue3.2.code-snippets、.vscode/vue3.3.code-snippets，将这三个文件都 ctrl+s 保存一下，再回到 .vue 页面，输入 vue 就应该有提示了。