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