手把手教你搭建vue3.0项目架构

前言：

GitHub上我开源了vue-cli、vue-cli3两个库，文章末尾会附上GitHub仓库地址。这次把2.0的重新写了一遍，优化了一下。然后按照2.0的功能和代码，按照vue3.0的语法，完全重写了一遍。虽然名字叫cli，其实两个库都是基于vue-cli创建的。做这个的目的是为了工作中快速启动项目，毕竟切片打包、less、axios、vuex、router、UI框架、基础文件目录、权限，这些都是基操，当然项目不同，还是要做些调整的。这两个项目的master分支都是最基础的东西，里面还包含了几个自定义的组件。vue-cli3 单独切出来一个app分支，这个分支会不定时的添加一些功能，比如hightCharts的甘特图，three.js，用户可以自定义的大屏展示等等一些功能，现在还啥都没有，看时间吧，有时间就会更新，会优先写vue3.0 的，2.0 的再说吧。也希望大家能帮我完善这个库，毕竟为了快速启动项目才搭建的，自然越优秀越好。app分支也是希望能有一些好的功能模块案例，为大家拓展思路。

一、用 vue-cli 创建项目

npm uninstall vue-cli -g           卸载老版本clinpm i @vue/cli -g                  安装新版本clinpm install -g @vue/cli-init       安装cli  vue -V                             查看cli的版本号，注意大小写vue create vue-cli                 创建vue3.0项目, 记得选择vue3

按上述步骤操作即可，我的vue-cli版本号是 4.5.11。这里注意一下，创建项目的的时候需要手动选择创建2.0还是3.0的项目，默认是2.0，脚手架是向下兼容的。

二、安装路由

npm install vue-router@4             安装路由，4.0版本的

我的路由版本是4.0.12

三、完善目录结构，创建配置文件vue.config.js

目录和vue.config.js都贴了一下，具体的还是去GitHub直接看源码，这里不多占用篇幅了。这里app.less设置了颜色变量，统一了整个系统的颜色，后期如果做主题，也方便维护。其中antd、vuex等后面再说。

四、安装ant-design-vue，安装less、安装dayjs

npm i --save ant-design-vue@next   安装 antd3.x的版本  3.0还在不断更新的阶段npm install babel-plugin-import --save-dev    引入babel， 配置 babel.config 文件，antd组件的按需加载npm install --save @ant-design/icons-vue  需要的话，引入antd的iconnpm install less --save  引入lessnpm i less-loader@4.1.0   注意版本号npm i style-resources-loader vue-cli-plugin-style-resources-loader -D  安装插件，vue.config.js 文件，增加less文件全局配置，主要配置全局变量npm install dayjs --save 并全局配置下 dayjs， 如果报错，重装一下ant-design-vue,dayjs比moment更加轻量

UI框架我用了ant-design-vue，这个大家随意根据自己需求和喜好来。但是要提醒一下，antd目前2.0版本做了对vue3的支持，而且是稳定的，现在正在做3.0版本的升级，项目中用的都是是3.0的写法，稳定性有待考究。再就是因为antd需要dayjs，这里也用了dayjs，用法大同小异，但是他非常小。项目中用了antd的按需加载，不用的组件还是不要引入的好，有需要的在antdUse.js文件引入即可。按需加载的方法官方文档有详述，需要修改babel.config.js。antd3的icon变成了通过组件的形式引入，使用起来有点繁琐，也需要注意。

安装less的babel时，注意版本号，高版本的会报错。我这里定义了全局的less变量，统一项目的各级别字体大小、各种颜色等等

五、安装vuex、axios

npm install vuex@next --save   安装vuex，并配置npm install axios   安装 axios，并做统一配置

axios没有什么变化。vuex建议详细看一下官方文档3.0到4.0的迁移文档。这里我简单列几个重要的，新版本中，用 createStore创建实例；通过 useStore 获取当前的vuex实例。具体写法看代码。

六、vue3的一些新语法

vue3参考了react hooks的实现方式，所以写法和编程思路很像，这里非常建议看一下尤雨溪大佬的这篇文章，点我跳转这里他对自己升级的前因后果做了很详细阐述，看完会对这次升级有比较清晰的认知。这次更新主要是对组件公共逻辑的提取复用和对单一组件逻辑组织做了很大的改动，当然根本动力还是对typescript的支持。ts是大势所趋。从我个人而言，这次改动很大，使vue3对新手来说，上手难度非常高。对程序员要求也提高了很多。很容易出现代码一锅粥，逻辑混乱的情况。呃 ...还有就是.value 和 props. 的写法太
下载地址:
微信小程序通过uni-app进行全局分享
Vue+ElementUI怎么处理超大表单实例讲解