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

红太狼 2022-12-03 08:45 154阅读 0赞

### 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` 文件：

<template>
      <div class="container">
        <div class="title">todos</div>
        <div class="form">
          <input class="new-todo" v-model="inputText" placeholder="下一步行动计划是？"></input>
          <button class="add-btn" @click="newTodo">确定</button>
        </div>
        <div class="todo-list">
          <div 
            :class="item.done ? 'todo-item done' : 'todo-item'" 
            v-for="item in todo"
            v-if="type === 'all' || (type === 'active' && !item.done) || (type === 'done' && item.done)"
            :key="item.id"
          >
            <div class="toggle" :data-id="item.id" @click="toggle"></div>
            <div >{
       { item.text }} </div>
            <div class="delete" :data-id="item.id" @click="deleteItem"></div>
          </div>
        </div>
        <div class="footer">
          <div class="todo-count"><div class="strong">{
       { left }} items left</div> </div>
          <div class="filters">
            <div class='ib' data-filter='all' @click="filter">
              <div :class="type === 'all' ? 'selected' : ''" >All</div>
            </div>
            <div class='ib' data-filter='active' @click="filter">
              <div :class="type === 'active' ? 'selected' : ''" >Active</div>
            </div>
            <div class='ib' data-filter='done' @click="filter">
              <div :class="type === 'done' ? 'selected' : ''" >Done</div>
            </div>
          </div>
          <button v-if="done > 0" class="clear-completed" @click="clear">Clear done</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'todo',
      data() {
        return {
          id: 1,
          todo: [{ text: '学习 Kbone', id: 0, done: false }, { text: '学习 vue', id: 1, done: false }],
          left: 2,
          type: 'all',
          done: 0,
          inputText: ''
        }
      },
      computed: {
        route() {
          return this.$route.path
        }
      },
      methods: {
        toggle(evt) {
          for (let i = 0, len = this.todo.length; i < len; i++) {
            const item = this.todo[i]
            if (item.id === Number(evt.currentTarget.dataset.id)) {
              item.done = !item.done
              this.computeCount()
              break
            }
          }
        },
        newTodo() {
          if (this.inputText.trim() === '') {
            return
          }
    
          this.todo.unshift({
            text: this.inputText,
            id: ++this.id,
            done: false,
            createTime: new Date()
          })
          this.computeCount()
          this.inputText = ''
        },
        deleteItem(evt) {
          for (let i = 0, len = this.todo.length; i < len; i++) {
            const item = this.todo[i]
            if (item.id === Number(evt.currentTarget.dataset.id)) {
              this.todo.splice(i, 1)
              this.computeCount()
              break
            }
          }
        },
        computeCount() {
          this.left = 0
          this.done = 0
          for (let i = 0, len = this.todo.length; i < len; i++) {
            this.todo[i].done ? this.done++ : this.left++
          }
        },
    
        filter(evt) {
          this.type = evt.currentTarget.dataset.filter
        },
        clear() {
          for (let i = 0, len = this.todo.length; i < len; i++) {
            const item = this.todo[i]
            if (item.done) {
              this.todo.splice(i, 1)
              len--
              i--
            }
          }
          this.done = 0
        }
      }
    }
    </script>
    
    <style>
    body {
      margin: 0;
    }
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .title{
        width: 100%;
        font-size: 40px;
        font-weight: 100;
        text-align: center;
        color: rgba(175, 47, 47, 0.55);
        -webkit-text-rendering: optimizeLegibility;
        -moz-text-rendering: optimizeLegibility;
        text-rendering: optimizeLegibility;
    }
    
    .new-todo{
      height: 38px;
      border: none;
      padding-left: 10px;
      /* background: rgba(0, 0, 0, 0.003); */
      display: inline-block;
      width: 280px;
    }
    .new-todo:after{
      border: none;
    }
    
    .add-btn{
      position: absolute;
      width: 20%;
      min-width: 70px;
      height: 40px;
      right: 0px;
      top:0px;
      border-left: 1px solid #ccc;
      border-radius: 0px;
      outline: none;
      appearance: none;
      -webkit-appearance:none;
      background: none;
      line-height: 40px;
      text-align:center;
    }
    
    .add-btn:after {
      border: none;
    }
    
    .form{
      position: relative;
      width: 100%;
      height: 40px;
      border: 1px solid #ccc;
    }
    
    .todo-list{
      width: 100%;
      padding-bottom: 40px;
    }
    
    .todo-item{
      position: relative;
     height: 40px;
     line-height: 40px;
     padding-left: 60px;
     border-bottom: 1px solid #ddd;
    }
    
    .toggle{
      position: absolute;
      left:8px;
      width: 26px;
      top:8px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid #ccc;
      display: inline-block;
    }
    
    .toggle:after{
      display: none;
    }
    
    .done .toggle:after{
      display: block;
      content: '✔';
      position: relative;
      top:-8px;
      left:6px;
      color: #79ddce;
    }
    
    .delete{
      position: absolute;
      right: 8px;
      width: 32px;
      height: 32px;
      text-align: center;
      display: inline-block;
      color: rgba(175, 47, 47, 0.5);
      top:0px;
    }
    
    .delete:after{
      content: '✕'
    }
    
    .done{
        color: #d9d9d9;
        text-decoration: line-through;
    }
    
    todo-footer{
      width: 100%;
      position: fixed;
      bottom: 0;
      background-color: white;
    }
    
    .add-btn:active{
      background-color: #ddd;
    }
    
    button {
      background: none;
      font-size: 12px;
      color: #777;
    }
    
    button:after {
      border: none;
    }
    
    .todo-count {
      position: absolute;
      left: 8px;
      top: 8px;
      }
    
    .ib {
      display: inline-block;
    }
    
    .footer {
      height: 40px;
      line-height: 28px;
      width: 100%;
      font-size: 12px;
      background-color: rgb(247, 247, 247);
      color: #777;
      position: fixed;
      bottom: 0px;
    }
    
    .clear-completed {
      position: absolute;
      top: 15px;
      right: 4px;
    }
    
    .filters {
      margin-left: 80px;
    }
    
    .filters .ib view, .filters .ib div {
      padding:0 4px;
      margin: 8px;
    }
    
    .selected{
      border: 1px solid rgba(175, 47, 47, 0.3);
    }
    
    .strong{
      font-weight: 500;
    }
    
    </style>

### 2.3 项目预览效果 ###

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

![format_png][]

### 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`, 效果如下：

![format_png 1][]

[format_png]: /images/20221123/8f674c2f1b3b4c0591b24c27d184c563.png
[format_png 1]: /images/20221123/eb60e880dd3c421da53436b16401d1ea.png