从零搭建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分⽀也是希望能有⼀些好的功能模块案例，为⼤家拓展思路。
⽬录：
vue3的⼀些新语法讲解
总结（源代码的GitHub地址也在最后）
⼀、⽤ 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
三、完善⽬录结构，创建配置⽂件fig.js
  ⽬录和fig.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，配置 fig ⽂件，antd组件的按需加载
npm install --save @ant-design/icons-vue  需要的话，引⼊antd的icon
npm install less --save  引⼊less
antdesignvue 配置外部文件npm i less-loader@4.1.0  注意版本号
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D  安装插件，fig.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⽂件引⼊即可。按需加载
的⽅法官⽅⽂档有详述，需要修改fig.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的实现⽅式，所以写法和编程思路很像，这⾥⾮常建议看⼀下尤⾬溪⼤佬的这篇⽂章，这⾥他对⾃⼰升级的前因后果做了很详细阐述，看完会对这次升级有⽐较清晰的认知。这次更新主要是对组件公共逻辑的提取复⽤和对单⼀组件逻辑组织做了很⼤的改动，当然根本动⼒还是对types
cript的⽀持。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实例，通过 fig.globalProperties. 实例原型上添加全局属性。可创建多实例，也不怕污染。
  report.js⽂件。通过 defineComponent 声明组件，配合 setup 这个组合函数完成组件逻辑的开发，具体写法看源码report.js这个⽂件。
  setup（props, context）这个组合函数，直接替代了vue2.0 computed watch ⽣命周期 methods等整⼀套写法。所有的逻辑，都在这个函数⾥⾯实现。所以，建议统⼀写法，虽然以前的写法也是⽀持的，个⼈建议要么之前那套，要么⼀点都不要。不要出现setup和methods同时出现的情况。
    1、setup  beforeCreate和created已经不需要了，setup的触发时机其实就是在beforeCreate之前。他仅在实例初始化的时候运⾏⼀次，以后再不会执⾏，setup是同步。
    2、两个参数，props是⽗级组件传递的数据，实时更新。不可以解构，会丢失监听。可以⽤torefs将props转为组件内部的监听数据。但是我个⼈感觉这不是个好⽅法，我还是喜欢 props. 的形式使⽤，这样代码⼀⽬了然，很清楚你⽤的数据到底是props传递的还是当前组件声明的。数据流向很清晰； context是个对象，可以解构使⽤，包含emit等属性，没什么好说的，看看⽂档就好。
    3、setupthis是没⽤的，因为还没return呢，所以各依赖包为了⽀持这⼀特性，都做了相应的更新 router vuex 都有专门的⽅法，通过引⼊的⽅式获取到实例。可以看⼀下下图的代码。
    4、计算属性、监听属性、⽣命周期。这些都是以⽅法的形式注⼊到组件中，⽣命周期的名字变了⼀些，功能⽅⾯并没有变化，监听属性也是，写法变化了。⽂档写的很清楚，这⾥，我就不多做赘述了。其次还增加了⼀些新的api。ref reactive声明响应式变量；provide / inject ⽗⼦组件互通；watchEffect ⾃动监听，不太推荐，他会⾃动监听所有的响应式变量，任何有变化了都会触发回调，有点类似于update。当然也会导致频繁执⾏的问题。⼀些简单的页⾯可以⽤，其他情况还是⽤watch⼿动标记需要监听的变量最好。
七、总结
  Vue3的新属性⾮常多，多研究看⽂档。不过⽬前社区还不是很完善，个⼈感觉到2022年的年底，应该会改善很多，⼤部分依赖都会⽀持。
  最后，如果⼤家觉得这个项⽬写的还可以的，给个star，对代码有问题，也希望⼤佬们能修正⼀下，有好的组件或者效果都可以分享⼀下。万⼀项⽬有需求就⽤上了呢，哈哈。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。