全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

Kbone基础 - [03] Vue+Kbone实现Todos App

发布时间:2022-10-11 14:36:28
发布人:wjy

  Kbone 基础 - [03] Vue + Kbone 实现 Todos App

  1、搭建Vue开发环境

  在命令行输入以下命令,创建一个 vue-todos 项目:

Vue+Kbone实现Todos App1

  2、编写Vue todos代码

  2.1 改写main.js

  将 main.js 引入的 App.vue 组件替换为 Todos.vue 组件:

Vue+Kbone实现Todos App2

  2.2 编写 Todo.vue 组件

  在项目 src 目录下,创建 Todos.vue 文件:

Vue+Kbone实现Todos App3

Vue+Kbone实现Todos App4

Vue+Kbone实现Todos App5

Vue+Kbone实现Todos App6

Vue+Kbone实现Todos App7

Vue+Kbone实现Todos App8

Vue+Kbone实现Todos App9

Vue+Kbone实现Todos App10-

  2.3 项目预览效果

  在控制台执行 npm serve 命令,浏览器效果如下:

Vue+Kbone实现Todos App11

  3、将vue项目编入Kbone

  3.1 改写kbone-vue项目main.js文件

Vue+Kbone实现Todos App12

  3.2 拷贝Totos.vue组件

  拷贝 Todos.vue 到 kbone-vue 项目的 src 根目录下。

  3.3 编写 todos.mp.js

  在 kbone-vue 项目的 src/mp 根目录下,创建 todos.mp.js 文件:

Vue+Kbone实现Todos App13

  3.4 修改kbone-vue项目的webpack.mp.config.js

Vue+Kbone实现Todos App14

  注意:确保 todos 在 entry 里位于第一个key,这样 todos 对应的页面就是小程序的默认打开页面。

  3.5 项目预览效果

  在控制台执行 npm run mp 或者 npm run build 命令,在小程序开发工具中导入 kbone-vue/dist/mp, 效果如下:

Vue+Kbone实现Todos App15

相关文章

rnn和lstm中batchsize和timestep的区别是什么?

rnn和lstm中batchsize和timestep的区别是什么?

2023-10-14
什么是OA服务器?

什么是OA服务器?

2023-10-14
常用的渗透测试工具都有哪些?

常用的渗透测试工具都有哪些?

2023-10-14
大数据测试工程师需要具备哪些技能?

大数据测试工程师需要具备哪些技能?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取