之前因为一个项目的原因，接触了Vue+ElementUI，通过已有的脚手架结构搭建了一个管理后台的前端程序。这次又有一个外包的项目需要一个管理后台，本着学习的态度，我打算不用脚手架直接从零开始搭建一个管理后台的框架，不单便于在过程中熟悉整个框架所需的一些库的应用，也同时可以结合自己的功能，便于之后再复用的时候可以得心应手一些。

这次既然打算直接从零开始，也就不再重新造轮子了，之前使用的vue-element-admin还是蛮不错的，不过是基于Vue2的，那么这次就直接用Vue3来作为整体的基础，虽然都是Vue而且很多机制还是类似，但是Vue2和Vue3还是有不少不同的地方的，因为之前Vue2的经验，在这次直接使用Vue3的过程中还是碰到了一些坑，接下来会说。至于样式，这次还是使用了Element-UI，不过因为要支持Vue3，所以使用了element-plus。其他还用到了Vuex来管理一些应用状态、Vue Router来管理路由、Axios来作为异步通讯的底层、file-saver和xlsx来开发数据导出功能、以及echarts5来做数据展示。

安装vue3js

首先第一步还是在本地系统上安装Vue3，这个基本上还是非常简单的，和安装其他npm的库一样

npm install vue@next

创建vite 项目

不错这次初始化项目的区别是不再直接使用Vue CLI来搭建空的脚手架了，而是提供了一个新的编译工具Vite，可以直接通过执行下面的指令来搭建一个最基础的空的基于Vue3的Vite项目：

NPM的指令，需要Node.js 12.0.0以上的版本：

$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

Yarn的指令：

$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

这样基本上就算是完成了最基础的一步，创建出来基础脚手架结构如下：

整体来说还是非常直接的，分成三个文件夹和一些配置文件，分别是存放第三方模块的nodemodules、存放导出时的静态文件的public以及存放源代码的src，配置文件包括了库的配置文件packages.json和Vite的配置文件vite.config.js。这个和之前的vue.config.js已经完全不同了，虽然使用vite最大的一个坑就是文档不是太齐全，不过感觉上去功能还是蛮强大的。

添加element-plus

添加elment-plus的时候也碰到了一个比较有意思的地方，虽然element-plus支持了vue3，但是在添加的时候还是出现了错误，先通过下面的方式添加elemen-plus到项目中，

vue add element-plus

安装过程中，有如下三个问题，来完成安装最后的配置：

安装运行后可能出现中文扩展不可加载的情况，如下

这个就需要在vite.config.js下面加一个深度加载依赖项的配置，在根目录下vite.config.js中添加：

optimizeDeps:{ 
  include: [ "element-plus/lib/locale/lang/zh-cn" ] 
}

这个可能是为了编译效率的原因，对于比较大的一些依赖项会需要独立添加，这个因为Vite文档不多的坑，还是费了不少时间查解决方案的。

添加路由功能

至此算是有个简单的空脚手架了，不过还只能是开发单页应用，所以作为管理后台还需要路由功能，就直接使用了官方库，vue-router，还是第一步直接安装

npm install vue-router

不过出现了下面的错误

查了不少资料后发现，因为安装vue-router的时候没有指定版本，安装的版本是vue-router 3，然而vue-router在版本4之后才全面支持Vue3，所以才出现了上面的问题，然后通过指定版本号重新安装了vue-router

npm install vue-router@4

安装完vue-router@4之后，又出现了一个新的错误：

不过这个坑并不是vue- router的问题，是因为Vue3的引入机制改变了，从之前的插件引入，变成了ES模块构建的导入，不过一开始没有意识到这个问题，所以直接看了一些vue-router的export文件，没有了之前的export mordule default，而是变成如下的导出方式

export { 
	NavigationFailureType, 
  RouterLink, 
  RouterView, 
  START_LOCATION_NORMALIZED as START_LOCATION, 
  createMemoryHistory, 
  createRouter, 
  createRouterMatcher, 
  createWebHashHistory, 
  createWebHistory, 
  isNavigationFailure, 
  matchedRouteKey, 
  onBeforeRouteLeave, 
  onBeforeRouteUpdate, 
  parseQuery, 
  routeLocationKey, 
  routerKey,
  routerViewLocationKey, 
  stringifyQuery, 
  useLink, 
  useRoute, 
  useRouter, 
  viewDepthKey 
};

所以直接修改一下模块引用的方式：

import {createRouter,createWebHashHistory} from 'vue-router'

这个最开始接触Vue3的时候，因为Vue2的经验还是有点不习惯的。

添加less

这次和之前vue-element-admin不同的是，我选择使用less来作为预处理css编译语言，算是一次新的尝试，安装过程还是比较简单的

npm i -D less less-loader

不过因为这次使用了Vite作为编译工具，所以配置预处理器还是花了点时间研究的，主要是Vite的文档对于配置项的案例并不多。最终通过几次尝试，在vite.config.js下添加css预处理的配置，理论上是可以通过additioalData这个属性来设置全局引入的less文件，但是尝试了几次都没有成功获取到相应的less变量，最终还是在项目的根页面layout里面手动加入的主题样式，便于调用。

css: { 
  cssPreprocessOptions: { 
    less: { 
      additionalData: '@import "/@/styles/theme.less";', // 添加公共样式 
    },
  } 
}

到这里基本上就可以算是把一个多页面管理后台的脚手架搭建好了，虽然不是太复杂，但是对于比较新接触到Vue3的我来说还是花了一些时间摸索的。接下来就是根据管理后台的需求来完成一个框架，会包括基于Axios库的开发一个简单的Request模块、使用Vuex来管理页面的状态、使用file-saver和xlsx来到处表格数据以及引入echart5来展现数据。

总结

总的来说，虽然没有完全对vite和vue3摸索透彻，但是看到不少非常有意思的功能，应该可以理解之后Vue3会完全脱离Vue2，而且功能会比Vue2更强大和稳定。但是目前来说，文档还是比较匮乏的，官方文档还有不少只有英文版，Vue3的官方文档也是这几个月才出中文版，不过可以逐步迭代完善的。

之后我还会给这个脚手架加入一些核心功能，如果感兴趣的话，可以关注我后续的文章，也可以在评论区留下你觉得需要的一些管理后台功能，我也会尝试去添加的。