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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

前言：

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           卸载老版本cli
npm i @vue/cli -g                  安装新版本cli
npm 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的icon
npm install less --save  引入less
npm i [email protected]   注意版本号
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. 的写法太啰嗦，我是不是要求有点高了，手动狗头，哈哈。

但是，用多了之后你会这很好用、很方便。vue3.0数据流向很清晰、还保留了数据响应式的老优点。巴适得很啊。博主最开始是用react的，刚开始转用vue的时候很不习惯，有写法的原因，最大的还是数据不清晰，所有数据都绑定在this上，可读性低了好多。

。。。扯远了，回归正题，直接说说按照我的理解，vue3有哪些变化，应该怎么去用。

首先，vue3支持typescript了，鼓掌、撒花。。。建议学习一下，当然用不用都行，毫无影响。只能说ts作为js的超集，彻底斩断了js的放荡不羁爱自由，变得中规中矩起来。也让代码更加规范，更加可掌控。不过很有意思的是，vue3彻底斩断了vue2的条条框框，彻底释放自由了，变量、方法直接在setup里面定义，逻辑也都在里面编写，再也不需要像以前那样在规定的地方声明监听属性、声明方法了。这个项目都是用js写的，我的ts水平也一般，再就是怕大家看不习惯，毕竟现阶段ts的普及还是有点低的。

下面会列举一些变化，有源代码，有注释，直接拉项目跑一下的好，这里只是简单提一些关键的变化。

main.js文件。通过 createApp方法创建vue实例，通过app.config.globalProperties.实例原型上添加全局属性。可创建多实例，也不怕污染。

report.js文件。通过 defineComponent声明组件，配合 setup这个组合函数完成组件逻辑的开发，具体写法看源码report.js这个文件。

setup（props, context）这个组合函数，直接替代了vue2.0 computed watch 生命周期 methods等整一套写法。所有的逻辑，都在这个函数里面实现。所以，建议统一写法，虽然以前的写法也是支持的，个人建议要么之前那套，要么一点都不要。不要出现setup和methods同时出现的情况。

setup beforeCreate和created已经不需要了，setup的触发时机其实就是在beforeCreate之前。他仅在实例初始化的时候运行一次，以后再不会执行，setup是同步。
两个参数，props是父级组件传递的数据，实时更新。不可以解构，会丢失监听。可以用torefs将props转为组件内部的监听数据。但是我个人感觉这不是个好方法，我还是喜欢 props. 的形式使用，这样代码一目了然，很清楚你用的数据到底是props传递的还是当前组件声明的。数据流向很清晰； context是个对象，可以解构使用，包含emit等属性，没什么好说的，看看文档就好。
setupthis是没用的，因为还没return呢，所以各依赖包为了支持这一特性，都做了相应的更新 router vuex 都有专门的方法，通过引入的方式获取到实例。可以看一下下图的代码。
计算属性、监听属性、生命周期。这些都是以方法的形式注入到组件中，生命周期的名字变了一些，功能方面并没有变化，监听属性也是，写法变化了。文档写的很清楚，这里，我就不多做赘述了。其次还增加了一些新的api。ref reactive声明响应式变量；provide / inject 父子组件互通；watchEffect自动监听，不太推荐，他会自动监听所有的响应式变量，任何有变化了都会触发回调，有点类似于update。当然也会导致频繁执行的问题。一些简单的页面可以用，其他情况还是用watch手动标记需要监听的变量最好。