如何搭建vue3.0项目架构

小编给大家分享一下如何搭建vue3.0项目架构，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一、用 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. 的写法太啰嗦，我是不是要求有点高了，手动狗头，哈哈。

但是，用多了之后你会这很好用、很方便。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同时出现的情况。

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.0项目架构”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！