从零搭建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分支也是希望能有一些好的功能模块案例,为大家拓展思路。
目录:
3、安装ant-design-vue,安装less、安装dayjs
5、vue3的一些新语法讲解
6、总结(源代码的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
三、完善目录结构,创建配置文件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 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的新属性非常多,多研究看文档。不过目前社区还不是很完善,个人感觉到2022年的年底,应该会改善很多,大部分依赖都会支持。
最后,如果大家觉得这个项目写的还可以的,给个star,对代码有问题,也希望大佬们能修正一下,有好的组件或者效果都可以分享一下。万一项目有需求就用上了呢,哈哈。
从零搭建vue3.0项目架构(附带代码、步骤详解)的更多相关文章
- 从零搭建react hooks项目(github有源代码)
前言 首先这是一个react17的项目,包含项目中常用的路由.状态管理.less及全局变量配置.UI等等一系列的功能,开箱即用,是为了以后启动项目方便,特地做的基础框架,在这里分享出来. 这里写一下背 ...
- vite 搭建Vue3.0项目
1.全局安装vite:npm install create-vite-app -g 2.创建项目:npx create-vite-app project-name 3.cd project-name ...
- zabbix系列(一)centos7搭建zabbix3.0.4服务端及配置详解
1.安装常用的工具软件 yum install -y vim wget centos7关闭防火墙 systemctl stop firewalld.service systemctl disable ...
- CentOS 7.0安装配置Vsftp服务器步骤详解
安装Vsftp讲过最多的就是在centos6.x版本中了,这里小编看到有朋友写了一篇非常不错的CentOS 7.0安装配置Vsftp服务器教程,下面整理分享给各位. 一.配置防火墙,开启FTP服务器需 ...
- 从零搭建一个SpringCloud项目之Feign搭建
从零搭建一个SpringCloud项目之Feign搭建 工程简述 目的:实现trade服务通过feign调用user服务的功能.因为trade服务会用到user里的一些类和接口,所以抽出了其他服务需要 ...
- vue2.0与vue3.0项目创建
脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...
- 从零开始搭建Vue2.0项目(一)之快速开始
从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...
- vue-cli搭建项目引入jquery和jquery-weui步骤详解
vue简介 Vue.js 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 ...
- Android零基础入门第19节:Button使用详解
原文:Android零基础入门第19节:Button使用详解 Button(按钮)是Android开发中使用非常频繁的组件,主要是在UI界面上生成一个按钮,该按钮可以供用户单击,当用户单击按钮时,按钮 ...
随机推荐
- 感恩笔记之SQL查询功能最简使用模板
感恩笔记之SQL查询功能最简使用模板 第一部分:SQL单表功能 1 语句主要关键字 SELECT --查询数据列 INTO --新建数据表 FROM --查询数据表 WHERE --筛选数据表结果 O ...
- react-native移动端设置android闪屏页
前言 因为app启动时会白屏一段时间,导致让人用起来非常的不舒服,后来了解一下知道这叫做闪屏 于是着手解决这个白屏的问题,换个颜色?不行,不如用一张好看的图片来替换,这样才让人看起来更加舒服. 那么该 ...
- 踩坑系列《九》 无法获取实体类xxx对应的表名
话不多说,直接说明原因 类似于 @MapperScan(basePackages = "com.hyxiao.user.mapper") 启动类的mapper扫描注解的导入包正确的 ...
- NOIP 模拟四 考试总结
#T1随 又是liu_................... 数列n,m个操作,每次随机取a[i],x=x*a[i]%k; 问题是求x期望%mod; 首先考虑到期望转移过程中存在%k,一般套路线性期望 ...
- Dart 中的final 和 const
Dart 常量和常量值 final 和 const 两个关键字用来定义常量,有什么区别呢? final 声明的是运行时常量,const声明的是编译时常量 const 可以声明常量值 举个例子: imp ...
- 寻找写代码感觉(五)之Mybatis官方代码生成器的使用
一.Mybatis Generator生成器 见名知意,官方给出的代码生成器.好处就是不用自己写实体类.接口.xml文件了,应对简单增删改查是可以的.复杂的还是需要自己手写sql的. 二.Mybati ...
- Rigidbody钢体移动时抖动问题
Rigidbody移动时抖动问题 撞墙抖动 Unity中物体移动有非常多的方式: 比如: transform.position += dir*speed*Time.deltaTime; transfo ...
- 【集成学习】:Stacking原理以及Python代码实现
Stacking集成学习在各类机器学习竞赛当中得到了广泛的应用,尤其是在结构化的机器学习竞赛当中表现非常好.今天我们就来介绍下stacking这个在机器学习模型融合当中的大杀器的原理.并在博文的后面附 ...
- PublishFolderCleaner 让你的 dotnet 应用发布文件夹更加整洁
大家都知道,在 dotnet 发布时,将会在输出的 publish 文件夹包含所需的依赖.在 .NET Core 开始,引入了 AppHost 的概念,即使是单个程序集,也需要独立的 Exe 可执行文 ...
- Java(17)面向对象之多态
作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201621.html 博客主页:https://www.cnblogs.com/testero ...