vue3.0 项目搭建和使用流程
最近在重构一个老项目,领导要求使用新的技术栈。好吧,是时候秀一波我新学的vue3.0了。
不多bb,开始我的表演。。。(以下只是我自己个人的理解和使用习惯,仅供参考哦)
一:项目搭建
1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建。(有兴趣可以研究一下vite,还是很香的)
2. 项目生成:iterm下: vue create myproject
之后根据自己的要求选择不同的配置
选择我们需要的3.x
之后按照要求配置一下router,已经pack.json 。。。 然后npm run serve
ok。一个基本的3.0项目搭建完成,结束。(那是不可能的)
二: 目录结构
原始的目录结构如下所示:
为了方便数据管理,我们需要自定义一些其他的文件。下面是一个简单的demo结构:
hooks用来定义一些公共组件的方法,可以在多个组件里面复用,也可以和vuex联用。
typing定义一些你需要使用的ts类型。比如:
根据不同的组件拆分不同的类型,然后统一在index中导出。index中可以定义一些公共的类型。
request定义一些http请求。
base.ts基本路径
api.ts合集api
http.ts 可以做一下axios请求拦截和配置一下环境。(development, product)
整体配置大致就是这样,把api,以及ts类型集中起来,更方便之后的管理。
在组件内部也需要拆分:
这是一个about页面。分为.vue文件和一个内部hooks的文件夹。.vue文件是基本demo结构。hooks里面根据不同的功能拆分不同的文件。比如:listdownhooks.ts文件就是用来出来下拉菜单的方法集合。还可以单独拆分一个样式文件,(我觉得有点麻烦就没做..)
目录结构就是这样。先在typing定义基本的数据类型,然后再每个组件下的hooks里面的方法中引入之后在.vue文件里面使用对应的方法。
三: composition api
composition api是一组基于功能的附加api,可以灵活地组合组件逻辑。配合ts食用更佳~~~
1. definecomponent
从composition api中解构出来,配合ts。 定义一个组件:
export default definecomponent({});
如果你不使用ts,也可以使用export default {} 的写法。
2. setup
composition api核心的部分,是vue3.0的亮点。替代之前beforecreate和created生命周期。
可以在setup中初始化一些响应式数据。
setup(props, ctx) 接受两个参数,props和ctx(上下文).
props是传统的父传子数据。不建议在setup中解构props,这样会使props失去响应。
ctx中可以解构出,slots,attrs, emit,用法类同于2.0。
3. ref和reactive
用来创建响应式数据的方法。从vue中解构出来 => import {ref, reactive} from 'vue';
ref使用:
通过ref创建一个响应式数据,console看一下。
这是一个ref式响应数据,我们在操作的时候通过number.value来操作数据,然后把结果return回去。
ref 声明基本类型和引用类型的区别?
ref声明基本类型,是创建了一个ref的响应式对象
ref声明引用类型,也是创建了一个ref的对象,但是内部是用reactive方法包装的响应式对象
如果你的ref对象被更改在一个reactive里面,可以直接通过key,value方法获取
reactive使用:
创建一个proxy式的响应数据。通过torefs将数据return回去。内部是这样的:
个人觉得:一些基本类型可以多使用ref定义,对于一个整体的定义,可以使用reactive。
其他:
其他的一些常用的方法比如:computed, watch,等其实用法和2.0差不多。这里不多描述。
四: 基本使用:
用一个基本的新闻列表为例。
主要就是在mounted阶段调取数据,在翻页的时候刷新数据。
目录:
src -> views -> news -> hook ->newslisthook.ts (用来处理列表数据)
在文件中定义一下原始数据。
定义一个newslist() 方法,内部包含一个getlist方法用来获取接口数据。一个方法分页请求时候触发,把getlist在mounted挂载。之后将数据和方法return出去。代码如下:
之后src -> views -> news ->news.vue文件中使用。
console一下list:
这样就可以直接在vue文件中渲染使用了。
总结一下:把需要用的方还有一些事件(click, mousedown, keyup...)可以放在hook中执行,vue文件就是用来数据渲染。
项目中使用到了antd的vue框架,大家在使用的时候最好按需加载。毕竟antd太大啦。
好啦,就到这里啦。新人尝试写vue3.0,不足地方多多指出哦。
以上就是vue3.0 项目搭建和使用流程的详细内容,更多关于vue3.0 项目搭建和使用的资料请关注其它相关文章!
上一篇: 华为鸿蒙 为什么是划时代的操作系统
下一篇: SOFM自组织特征映射第一步:选取样本点
推荐阅读
-
创建基于ASP.NET core 3.1 的RazorPagesMovie项目(一)-创建和使用默认的模板
-
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
-
vue3.0 项目搭建和使用流程
-
Spring Security授权流程(项目中使用)
-
Spring Security授权流程(项目中使用)
-
Hadoop源码学习笔记之NameNode启动流程分析一:源码环境搭建和项目模块及NameNode结构简单介绍
-
vue项目搭建通过vue-cli包括组件路由的使用实现基本的前端项目全流程
-
如果让vue2.0项目中使用vue3.0语法
-
Docker使用Git实现Jenkins发布、测试项目的详细流程
-
创建基于ASP.NET core 3.1 的RazorPagesMovie项目(一)-创建和使用默认的模板