vue3.0 项目搭建和使用流程


Posted in Vue.js onMarch 04, 2021

最近在重构一个老项目,领导要求使用新的技术栈。好吧,是时候秀一波我新学的vue3.0了。

不多bb,开始我的表演。。。(以下只是我自己个人的理解和使用习惯,仅供参考哦)

一:项目搭建

1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建。(有兴趣可以研究一下vite,还是很香的)

2. 项目生成:iTerm下: vue create myproject

vue3.0 项目搭建和使用流程

之后根据自己的要求选择不同的配置

vue3.0 项目搭建和使用流程

选择我们需要的3.x

之后按照要求配置一下router,已经pack.json 。。。 然后npm run serve

vue3.0 项目搭建和使用流程

ok。一个基本的3.0项目搭建完成,结束。(那是不可能的)

二: 目录结构

原始的目录结构如下所示:

vue3.0 项目搭建和使用流程

为了方便数据管理,我们需要自定义一些其他的文件。下面是一个简单的demo结构:

vue3.0 项目搭建和使用流程

hooks用来定义一些公共组件的方法,可以在多个组件里面复用,也可以和vuex联用。

typing定义一些你需要使用的ts类型。比如:

vue3.0 项目搭建和使用流程

vue3.0 项目搭建和使用流程

根据不同的组件拆分不同的类型,然后统一在index中导出。index中可以定义一些公共的类型。

request定义一些http请求。

vue3.0 项目搭建和使用流程

base.ts基本路径

api.ts合集api  

http.ts 可以做一下axios请求拦截和配置一下环境。(development, product)

整体配置大致就是这样,把api,以及ts类型集中起来,更方便之后的管理。

在组件内部也需要拆分:

vue3.0 项目搭建和使用流程

这是一个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生命周期。

vue3.0 项目搭建和使用流程

可以在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使用:

import {ref, defineComponent} from 'vue';
export default defineComponent({
 setup() {
  const number = ref(0);
  console.log(number); 
  return {
   number
  }
 }
})

通过ref创建一个响应式数据,console看一下。

vue3.0 项目搭建和使用流程

这是一个ref式响应数据,我们在操作的时候通过number.value来操作数据,然后把结果return回去。

ref 声明基本类型和引用类型的区别?

ref声明基本类型,是创建了一个ref的响应式对象

ref声明引用类型,也是创建了一个ref的对象,但是内部是用reactive方法包装的响应式对象

如果你的ref对象被更改在一个reactive里面,可以直接通过key,value方法获取

reactive使用:

import {reactive, defineComponent, toRefs} from 'vue';
export default defineComponent({
 setup() {
  const obj = reactive({   
    menuList: [] as Array<T>
   });
  console.log(number); 
  return {
    ...toRefs(obj);
  }
 }
})

创建一个proxy式的响应数据。通过toRefs将数据return回去。内部是这样的:

vue3.0 项目搭建和使用流程

个人觉得:一些基本类型可以多使用ref定义,对于一个整体的定义,可以使用reactive。

其他:

其他的一些常用的方法比如:computed, watch,等其实用法和2.0差不多。这里不多描述。

四: 基本使用:

用一个基本的新闻列表为例。

vue3.0 项目搭建和使用流程

主要就是在mounted阶段调取数据,在翻页的时候刷新数据。

目录:

src -> views -> News -> Hook ->newsListHook.ts (用来处理列表数据)

在文件中定义一下原始数据。

let dataSource = reactive({
 list: [] as Array<InewsList> // InewsList是数据类型 
});

定义一个newsList() 方法,内部包含一个getList方法用来获取接口数据。一个方法分页请求时候触发,把getList在mounted挂载。之后将数据和方法return出去。代码如下:

/** * 1. 列表请求数据 */import api from '../../../request/api';
import {reactive, onMounted} from 'vue';
import {InewsList} from '../../../typing';
export function newsList(): object { 
 let dataSource = reactive({list: [] as Array<InewsList>});
 function getList(obj: object): void {
  api.newsList(obj).then(res => {
   dataSource.list = res.data.data; })
 };
 function onChange(e: any): void {
  let start = e || 10;
  const obj = {start,num: 10};
  getList(obj);
 }; 
 onMounted(() => {
  const startObj = {start: 1, num: 10};
  getList(startObj);
 }); 
 return {
  dataSource,
  getList,
  onChange
}}

之后src -> views -> News ->News.vue文件中使用。

import {newsList} from './Hook/newslistHook';
export default defineComponent({ 
  name: 'news',
  setup() { 
  const list = newsList();
  return {
   ...list // list中包含着所有定义的数据和方法。
  } 
}})

console一下list:

vue3.0 项目搭建和使用流程

这样就可以直接在vue文件中渲染使用了。

总结一下:把需要用的方还有一些事件(click, mousedown, keyup...)可以放在hook中执行,vue文件就是用来数据渲染。

项目中使用到了antd的Vue框架,大家在使用的时候最好按需加载。毕竟antd太大啦。

import Menu from 'ant-design-vue/es/menu/index'
import Select from 'ant-design-vue/es/select/index'
createApp(App).use(store).use(router).use(Menu).use(Select)

好啦,就到这里啦。新人尝试写vue3.0,不足地方多多指出哦。

以上就是vue3.0 项目搭建和使用流程的详细内容,更多关于vue3.0 项目搭建和使用的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue 数据双向绑定的实现方法
Mar 04 #Vue.js
vue3.0中使用element的完整步骤
Mar 04 #Vue.js
VUE实现吸底按钮
Mar 04 #Vue.js
vue实现可移动的悬浮按钮
Mar 04 #Vue.js
vue中axios封装使用的完整教程
Mar 03 #Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 #Vue.js
详解vue3中组件的非兼容变更
Mar 03 #Vue.js
You might like
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
vue实现拖拽进度条
2021/03/01 Vue.js
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
社区志愿者活动总结
2014/06/26 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
关于诚信的活动方案
2014/08/18 职场文书
初中生毕业评语
2014/12/29 职场文书
教师节大会主持词
2015/07/06 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python