公司后台管理系统搭建（Vue3+Vite+Element Plus+TypeScript+Pinia）

前言

此次项目搭建选用 Vue3+Vite，并使用 pnpm 管理依赖包，本文将从下载到项目创建记录项目全过程。

一、项目搭建

1、使用 npm 下载 pnpm ，使用 pnpm，依赖包将被存放在一个统一的位置，因此可以节省大量的硬盘空间以及提高安装速度。

npm install -g pnpm

（Tips：mac 需前面加上 sudo） 

sudo npm install -g pnpm

2、使用 vite 创建项目，以前都是用 webpack、vue-cli等打包工具，但是项目量级变大之后的打包速度不尽人意，因此选用 vite 大幅提升了开发服务器启动时间。

pnpm create vite

后续跟随步骤选择 vue3 和 ts 即可。

3、项目创建完毕，打开项目试运行。

cd projectName

pnpm install

pnpm run dev

4、引入插件 element-plus ，选用 element-plus 作为页面主题 UI 是因为其简洁优雅的界面样式及用户体验回馈。项目使用官方推荐的自动导入所需插件，步骤如下：

1）安装 element-plus

pnpm install element-plus

2）安装unplugin-vue-components 和 unplugin-auto-import这两款插件

pnpm install -D unplugin-vue-components unplugin-auto-import

3）然后把下列代码插入到你的 Vite 的配置文件中

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

（Tips：饿了么官方框架模板，可作参考，点击预览项目效果）

5、项目选用 less 作为 css 扩展语言

pnpm install less less-loader --save-dev

6、下载 VueUse 插件库，很好用，不懂 vue 的 YYX 也有推荐，后续的网页开灯关灯效果也有用到。

pnpm i @vueuse/core

pnpm i @vueuse/components

7、安装 axios ，发送网络请求

pnpm install axios

8、安装 vue-router ，路由

pnpm install vue-router --save

9、安装 pinia ，与 vuex 相比最大特点可能就是少了 mutations ，这是一个很棒的改变，省去了很多冗长的操作。

pnpm install pinia

---

至此一个 vue3 + vite 的项目就初步搭建完毕。 

（Tips：可在 package.json 中加上 --open 让项目可在打包后自动打开网页）

以下为项目后续文章，此项目将持续更新至完结：

二、公司后台管理系统：项目结构整理

三、后台管理系统页面布局基本结构

四、Pinia 的安装及其基本使用 

前端小技巧（solve）

前端 VSCode 常用插件库