vue3的小demo

demo的准备

新建文件夹，在该文件夹下打开cmd，输入

1. vue create 项目的名称
举例：vue create demo
我们选择自定义，即
2. Manually select features
回车，按需引入自己需要的，按空格即代表选中
3. 举例：
>(*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
回车
4. 选择要用来启动项目的 Vue.js版本（使用箭头键），选择3.x
5. 使用类样式组件语法？ 输入N
6. 将 Babel 与 TypeScript 一起使用（现代模式、自动检测的 polyfills、转译 JSX 需要）？输入Y
7. 路由器使用history模式？选择N （这个决定你编译出来的地址是否含有 /#/ 的字样）
8. 选择一个 CSS 预处理器 这里按自己的需求来，这里我选择Sass/SCSS (with dart-sass)
9. 选择一个 linter /格式化程序配置 选择ESLint + Standard config
10. Pick additional lint features 选择Lint on save
11. 您更喜欢将 Babel、ESLint 等的配置放在何处？ 选择In dedicated config files，这样好处理
12. 将此保存为将来项目的预设？这里我选择N，看个人的需求了

引入bootstrap的样式：在public的文件夹下的index.html加入

 <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">

书写在title标签下即可

修改内容

在App.vue中，修改内容

<template>
  <router-view/>
</template>

修改views下的HomeView.vue

<template>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
      <a class="navbar-brand">
        <div class="logo"></div>
        <span>今日任务</span>
      </a>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <router-link class="nav-link" to="/add">代办事项</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/done">已完成的事项</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/delete">删除的事项</router-link>
        </li>
      </ul>
    </nav>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'HomeView'
})
</script>

<style lang="css" scoped>
.logo {
  background: url('~@/assets/logo.png') no-repeat center center;
  background-size: contain;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.navbar-brand {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

修改路由规则，在项目的router下的index.ts文件，将子路由的规则写好：

  {
    path: '/',
    name: 'home',
    component: HomeView,
    children: [
      {
        path: '',
        redirect: { name: 'add' }
      },
      {
        path: '/done',
        name: 'done',
        component: () => import('../components/DoneView.vue')
      },
      {
        path: '/delete',
        name: 'delete',
        component: () => import('../components/DeleteView.vue')
      },
      {
        path: '/add',
        name: 'add',
        component: () => import('../components/addList.vue')
      }
    ]
  }

在components文件夹下依次创建DoneView.vue、DeleteView.vue、addList.vue三个文件，分别对应着，待办事项，完成事项

DoneView.vue的文件代码：

<template>
  <ul class="list-group">
    <li class="list-group-item" v-for="(i, index) in done" :key="'done-' + index">
      {{ i }}
    </li>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from 'vue'
import store from '../store'
export default defineComponent({
  setup() {
    return reactive({
      done: computed(() => store.state.done)
    })
  }
})
</script>

DeleteView.vue的文件代码：

<template>
  <ul class="list-group">
    <li class="list-group-item" v-for="(i, index) in deleteList" :key="'deleteList-' + index">
      {{ i }}
    </li>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from 'vue'
import store from '../store'
export default defineComponent({
  setup() {
    return reactive({
      deleteList: computed(() => store.state.delete)
    })
  }
})
</script>

addList.vue的文件代码：

<template>
  <div class="form-group">
    <label for="exampleInputEmail1">添加待办事项</label>
    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="inputValue" @keydown.enter="addValue(inputValue)" placeholder="请输入你需要添加的事项" />
    <small id="emailHelp" class="form-text text-muted">回车保存</small>
  </div>
  <!-- 事项 -->
  <ul class="list-group">
    <li class="list-group-item" v-for="(i, index) in add" :key="'todo-' + index">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" @click.prevent="check(index)" />
        <label class="form-check-label" for="exampleCheck1">{{ i }}</label>
      </div>
      <div class="float-right">
        <button type="button" class="btn btn-danger" @click="deleteValue(index)">删除</button>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue'
import store from '../store'
export default defineComponent({
  setup() {
    const inputValue = ref('')
    const addValue = (value: string) => {
      if (value.trim() === '') return
      store.commit('ADDValue', value)
      inputValue.value = ''
    }
    const deleteValue = (index: number) => {
      store.commit('DELETEValue', index)
    }
    const check = (index: number) => {
      store.commit('DONEValue', index)
    }
    return reactive({
      inputValue,
      addValue,
      deleteValue,
      check,
      add: computed(() => store.state.add)
    })
  }
})
</script>

<style scoped>
.list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

vuex管理

项目使用了vuex的管理，在store文件夹index.ts的代码：

import { createStore } from 'vuex'

export default createStore({
  state: {
    add: [] as string[],
    done: [] as string[],
    delete: [] as string[]
  },
  getters: {},
  mutations: {
    // add添加数据
    ADDValue(state, value) {
      state.add.push(value)
    },
    // delete删除数据
    DELETEValue(state, index) {
      const item = state.add[index]
      state.add.splice(index, 1)
      state.delete.push(item)
    },
    // done完成的数据
    DONEValue(state, index) {
      const item = state.add[index]
      state.add.splice(index, 1)
      state.done.push(item)
    }
  },
  actions: {},
  modules: {}
})

运行项目：

npm run serve

打开浏览器就可以查看到demo了，在输入框输入的事项按回车就会进入待办事项，点击复选框就会进入完成的事项，点击删除就会进入删除的事项，这个demo的重点在于vue2和vue3之间的区别，vue3下的vuex的使用，总体来说，vue3相比vue2来说，代码的复用性会提高，方便了维护，实现了各个部分的按需引入。