当前位置：首页 > article >正文

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

article 2024/10/20 0:36:42

在开始使用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 就应该有提示了。