Kbone 基础——Vue + Kbone 实现 Todos App

1、搭建Vue开发环境

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

// 在全局安装 @vue/cli
npm install -g @vue/cli

// 在kbone目录下创建vue-todos项目
vue create vue-todos

// 运行项目
cd vue-todos
npm serve

2、编写Vue todos代码

2.1 改写main.js

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

import Vue from 'vue'
import Todos from './Todos.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(Todos),
}).$mount('#app')

2.2 编写 Todo.vue 组件

在项目 src 目录下，创建 Todos.vue 文件：

2.3 项目预览效果

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

3、将vue项目编入Kbone

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

import Vue from 'vue'
import Todos from './Todos.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(Todos),
})

3.2 拷贝Totos.vue组件

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

3.3 编写 todos.mp.js

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

import Vue from 'vue'
import todo from '../Todos.vue'

export default function createApp() {
  const container = document.createElement('div')
  container.id = 'app'
  document.body.appendChild(container)

  return new Vue({
    el: '#app',
    render: h => h(todo)
  })
}

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

// ...

module.exports = {
  // ...

  entry: {
    // js 入口
    todos: path.resolve(__dirname, '../src/mp/todos.mp.js'),
    // ...
  },

  // ...
}

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

3.5 项目预览效果

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