Kbone 基礎(chǔ) - [03] Vue + Kbone 實(shí)現(xiàn) Todos App
1、搭建Vue開發(fā)環(huán)境
在命令行輸入以下命令，創(chuàng)建一個 vue-todos 項(xiàng)目：
2、編寫Vue todos代碼
2.1 改寫main.js
將 main.js 引入的 App.vue 組件替換為 Todos.vue 組件：
2.2 編寫 Todo.vue 組件
在項(xiàng)目 src 目錄下，創(chuàng)建 Todos.vue 文件：
2.3 項(xiàng)目預(yù)覽效果
在控制臺執(zhí)行 npm serve 命令，瀏覽器效果如下：
3、將vue項(xiàng)目編入Kbone
3.1 改寫kbone-vue項(xiàng)目main.js文件
3.2 拷貝Totos.vue組件
拷貝 Todos.vue 到 kbone-vue 項(xiàng)目的 src 根目錄下。
3.3 編寫 todos.mp.js
在 kbone-vue 項(xiàng)目的 src/mp 根目錄下，創(chuàng)建 todos.mp.js 文件：
3.4 修改kbone-vue項(xiàng)目的webpack.mp.config.js
注意：確保 todos 在 entry 里位于第一個key，這樣 todos 對應(yīng)的頁面就是小程序的默認(rèn)打開頁面。
3.5 項(xiàng)目預(yù)覽效果
在控制臺執(zhí)行 npm run mp 或者 npm run build 命令，在小程序開發(fā)工具中導(dǎo)入 kbone-vue/dist/mp, 效果如下：
京公網(wǎng)安備 11010802030320號