智慧屏 安装 app如何提升家庭娱乐与教育体验的关键工具
467
2023-02-18
本文目录一览:
有句话说,会使用 vue 开发的程序员就会开发小程序,确实是这样,在我学习 vue 后,再去学习小程序时,感觉很好上手,因为很多语法都是类似的写法。当然,也有很多不一样的。
1.声明 data :用过 vue 的朋友都知道, vue 中声明 data 时, data 必须是函数,不然会报错,原生的小程序就不是这样,直接 data: { } 就ok了。
2.绑定数据:绑定动态属性时需要在属性的双引号里使用 {{ }}
3.列表循环:使用 wx:for ,在循环题内有隐藏的item代表当前项, index 代表下标
4.事件 事件处理函数在page里定义,和onLoad / data等同级
事件的写法:以 bind 或 catch 开头,然后跟上事件的类型,如 bindtap、catchtouchstart
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
事件的传参:事件传参不能事件处理通过 () 来传递参数,在组件里面通过自定义属性 data-xx="参数名称" 来定义,在事件处理函数里通过 event.currentTarget.dataset 来获取参数
事件官方文档
5.修改data里面的数据
在vue中,修改data里面的数据,直接【 this.属性 】就可以修改了,可是小程序不一样,它需要通过【 this.setData({ data: newData }) 】来修改,访问data的中的数据用【 this.data.xx 】来访问;一开始学习小程序的时候,习惯了[vue](https://cn.vuejs.org/)的写法,总是写成 vue 的法,贼难受。
6.自定义组件
更多关注 小程序官方文档
Hello 大家好使用vue开发小程序,这里是Anyin。
最近打算把一个小型项目(小程序点餐系统)重构为微服务+微应用模式使用vue开发小程序,前端的技术栈打算使用Vue3 + TS + ElementPlus + Qiankun 。这里记录下使用vue开发小程序我在构建基础微应用的过程。
重构后的项目相关地址使用vue开发小程序:
•后端: Anyin Cloud [1]
•前端基座: Anyin Cloud Parent[2]
•前端微应用: Anyin Cloud Base[3]
好了,接下来,我们来看看如何基于 Vue3+TS+ElementPlus+Qiankun 构建我们的微应用项目。
另外说下,这里为什么不用 Vite 进行构建,原因是 Vite 目前结合 Qiankun 构建为应用还有点问题(采坑了),所以这里就放弃了。
首先,我们使用 vue-cli 创建一个parent项目:
接着,手动选择我们要添加的组件:
我们选择以下组件进行应用的构建,使用空格键进行多选,然后回车即可:
选择vue3.x版本
相关代码风格、路由模式都是使用默认,css编译我们使用less:
相关编码规范我们使用ESLint + Airbnb Config :
最后,完整的选项如下:
当vue-cli帮我们创建好项目,我们进入项目查看下项目目录,如下:
首先,Qiankun的主应用是需要安装依赖的,微应用无需安装依赖,修改配置即可。这里我们先在主应用安装依赖
接着,进行相关微应用配置。我们新增一个 app.ts ,用于记录所有的微应用的入口:
然后,注册微应用,并导出start方法
导出 start 方法之后,需要在入口处执行该方法
对于整个界面,我们希望整体的布局是这个样子的:
所以,我们在安装 ElementPlus 之后,需要做这样子的布局。
首先,安装 ElementPlus
接着,在 main.ts 引入 ElementPlus 组件,如下:
然后,创建一个布局组件 Layout.vue ,如下:
最后,在App.vue注册该组件
运行起来呈现的效果如下:
微应用的初始化项目同主应用,这里就不详细说明。
微应用无需依赖 Qiankun ,这里我们做一些配置即可。
在 src 目录下新增一个 public-path.js 文件,内容如下:
在 main.ts 引入该文件
新增一个路由配置文件,这里我们创建对应的路由信息,并且兼容独立运行,内容如下:
接着,修改 main.ts 关于实例化的代码,如下:
这里主要是定义个渲染的方法,然后暴露Vue实例,因为等下在微应用的生命周期的钩子会使用到。
对于微应用还需要暴露生命周期的钩子方法,这样子主应用才能够识别,在 main.ts 添加如下方法:
使用 vue 创建项目是没有 vue.config.js 文件的,这里我们手动创建一个,并且配置相关详细,代码如下:
•这里我们导入了 package.json 的 name 字段,因为这里需要和主应用配置的 app.ts 文件的 name 字段一致 • headers 添加跨域配置,因为主应用是通过 fetch 方法来获取微应用的资源的,而微应用是启动在另外一个端口,所以需要添加跨域配置 • output 配置了微应用的打包格式,主应用才能正确识别微应用的一些配置
还记得我们以下这个图不使用vue开发小程序?
我认为 Header 应该是属于主应用,而下面的 Aside 和 Main 都是属于微应用, Aside 块一般都是用于展示菜单,个人认为各个微应用应该各自维护自己的菜单,而不是交由主应用维护。
所以,在微应用,我们还需要处理下左侧的菜单布局。
我们新增一个 Layout.vue 布局文件
至此,Vue3+TS+ElementPlus+Qiankun构建微应用项目的一个基本结构我们已经处理完成,整体运行看下效果:
首页
微应用
好了,基于 Vue3+TS+ElementPlus+Qiankun 的微应用项目基本框架我们已经搭建好了,后续就是慢慢填充一些工具和页面了。
相关源码地址:
•主应用: Anyin Cloud Parent
•微应用: Anyin Cloud Base
[1] Anyin Cloud : https://gitee.com/anyin/anyin-cloud
[2] Anyin Cloud Parent: https://gitee.com/anyin/anyin-cloud-parent
[3] Anyin Cloud Base: https://gitee.com/anyin/anyin-cloud-base
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~