当前位置: 首页 > 后端技术 > Node.js

使用mpvue实现一个简单的demo

时间:2023-04-03 23:45:06 Node.js

完善的组件化开发能力:完善代码完善的Vue。核心功能-组件。组件可以扩展html,封装和重用代码,这说明一棵组件树是由无数个组件组成的。通常一个应用程序是以嵌套的组件树的形式组织的:好的组件树具有封装性、可重用性和可扩展性。封装组件的封装过程有这些步骤:【创建.vue文件】-【进行独立的逻辑处理】-【暴露必要的属性、方法等】。进行演示:列表卡。里面的信息包括title标题,content内容,图片image,time时间等等。这是一个独立的功能项,可以封装,只暴露一个Array属性变量,非常简洁和独立。此时其他开发者不需要关注列表项的细节,只需要关注当前模块的逻辑处理即可。可重用组件的重用,用另一个技术术语来说,就是组件之间的通信。以前面的demo列表卡片为例,它只负责里面UI功能的实现,不负责和server打交道;其父组件可以通过其暴露的Array属性传入需要的数据,实现数据渲染,从而达到降低耦合的效果。同时,如果其他模块需要用到卡片组件,比如收藏、评论等。因此,可以复用的组件称为通用组件。可扩展性说到可扩展性,这可以说是Vue的一个优秀实践,用面向对象的思想来达到组件之间相互继承的目的。举个demo:Echarts实现的数据可视化图。图表的基本配置是通过组件化进行的。在业务实现过程中,扩展图表组件在折线图、柱状图和力向图之间切换。稍微说一下,vue还有一个hook叫mixins,其实和extends的作用很相似,都是起到混合和合并的作用,不同的是extends的优先级更高,并且执行顺序高于父组件。pvue的目录结构关于mpvue初始化的工程结构,我们一起来看一张图,展示了主要的目录结构,工程└────build//编译打包node.js脚本和webpack配置文件└────config//开发和生产环境的不同配置└────src//主要写小程序功能的地方│──components│──pages│──utils│──app.json│──App.vue│──main.js└──static//用来存放各种小程序的本地静态资源└────package.json//项目的主配置文件└──project.config.json//use管理微信开发者工具的小程序项目的配置文件从这张图中我们可以看到各个目录结构的作用和应用。一般在进行业务开发时,一般只需要在src目录下进行开发即可。mpvue的生命周期mpvue(见github地址)是一个使用Vue.js开发小程序的前端框架。该框架基于Vue.js核心,mpvue修改了Vue.js的运行时和编译器实现,使其可以在小程序环境中运行,从而为小程序开发引入了一整套Vue.js开发经验。所以mpvue的生命周期既包括vue的生命周期,也包括applet的生命周期。对于小程序的生命周期,有两种情况。APP对象有onLaunch、onShow和onHide。页面对象有onLoad、onShow、onReady、onHide和onUnload。vue的生命周期,主要有8个钩子。【beforeCreate】-【created】-【beforeMount】-【mounted】-【beforeUpdate】-【updated】-【beforeDestroy】-【destroyed】。由于mpvue是和小程序、vue关联在一起的,所以mpvue的生命周期其实是和vue实例的生命周期兼容的。参考mpvue源码【mpvue/mpvue-quickstart初始化项目】-【node_modules】-【mpvue】-【LIFECYCLE_HOOKS数组】。从这张图可以看出,mpvue的生命周期对应的就是这个顺序。toolsList简单demo简介:使用mpvue初始化的项目实现一个简单的列表增删改查demo,过程分为几个小步骤。1、创建一个todolist组件首先,我们需要在[src]-[components]中创建一个[todolist.vue];然后在pages中新建一个文件夹[todolist],这是小程序用来展示todolist的新页面。project└────build└──config└────src│──components│──todolist.vue//创建组件│──pages│──todolist//创建文件夹│──utils│──app.json│──App.vue│──main.js└────static└──package.json└────project.config.json2.启动todolist文件夹下的entry文件,新建一个entry文件main.js,这是一个统一的方式来引用和挂载新创建的组件。从“vue”导入Vue;从'./index'导入应用程序;constapp=newVue(App);app.$mount();3.新建一个入口组件创建一个index.vue页面并调用其中的组件4.实现todolist的业务逻辑5.呈现出来的效果还可以,基本完成了一个简单的增删改查demo。虽然简单,但是里面有很多坑,比如eslintRules,wx:forissues等等,所以有空的可以去github上拿到我的代码对比一下,希望能有更深入的研究。