Vue3实战系列：结合 Ant-Design-of-Vue 实践 Composition API

入口页面

首先映入眼帘的是 main.js 的变化：

// Vue 3.0

import { createApp } from 'vue'

import App from './App.vue'

import './index.css'

createApp(App).mount('#app')

// Vue 2.x

import Vue from 'vue'

import App from './App.vue'

new Vue({

  render: h => h(App)

}).$mount('#app')

第一段代码是 Vue 3 的创建 Vue 实例形式，通过 createApp 的形式，你别说，和 React 真的挺像的。

第二段是 Vue 2.x 的创建 Vue 实例形式，通过 new 的形式创建。

添加路由 Vue-Router

截止目前，vue-router-next 更新到了 v4.0.0-beta.12 版本。

你如果用 cnpm install vue-router 安装路由，是会下载到 vue-router 3.x 的版本，我们需要使用：

cnpm install vue-router@next -S

安装完毕之后，我们开始配置项目路由，在 src 目录下新建 rourer 文件夹，在文件夹下新建 index.js 文件，添加如下内容：

import {createRouter, createWebHashHistory} from 'vue-router'

export default createRouter({

  history: createWebHashHistory(),

  routes: []

})

Vue 2.x 的路由模式通过 mode 选项为 history 或 hash 去控制。

而在 Vue 3 中，通过 createRouter 创建路由实例，history 属性作为控制路由模式的参数，createWebHashHistory 方法返回的是 hash 模式，createWebHistory 返回的是 history 模式，本项目采用 hash 模式。

同样，我们需要在 mian.js 中引入 router 实例：

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import './index.css'

createApp(App).use(router).mount('#app')

添加全局状态 Vuex

vuex 更新到了 v4.0.0-beta.4 版本，所以我们需要用如下指令安装：

cnpm i vuex@next -S

接下来在 src 目录下创建 store 文件夹，再新建 index.js 文件，添加代码如下：

// Vue 3

import { createStore } from 'vuex'

export default createStore({

  state() {

    return {

      author: "十三",

    };

  },

});

对比 Vue 2.x 写法：

// Vue 2.x

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state,

  mutations,

  actions,

  modules: {}

})

同样是使用新的写法，通过 vuex 内部抛出的 createStore 方法，创建一个 Vuex 实例。

接下来我们将它引入到 main.js 中：

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import './index.css'

// 链式调用

createApp(App).use(router).use(store).mount('#app')

引入 Antd for Vue3 版本组件库

Antdv2.x是唐金州老师（杭州校宝在线）研发的新一代适配 Vue 3.0 的组件库，我们来尝尝鲜，这边我们通过如下命令后下载：

cnpm i --save ant-design-vue@next -S

在 mian.js 内引入 ant-design-vue 组件如下所示：

import { createApp } from 'vue'

import Antd from 'ant-design-vue';

import App from './App.vue'

import router from './router'

import store from './store'

import 'ant-design-vue/dist/antd.css';

import './index.css'

// 本教程采用的是全局引入组件库

createApp(App).use(router).use(store).use(Antd).mount('#app')

测试一下是否成功，顺便解释一下 Vue 3 如何声明变量，以及如何通过方法改变变量，代码如下：

如上述代码所示，Vue 3 新增的 setup 方法，颠覆了之前传统的 options 属性方式，我们可以将业务逻辑都写在 setup 方法中。

我们有两种声明变量的形式：

ref：它用于声明简单的基础类型变量，如单个数字、boolean、字符串等等。

reactive：它用于对象引用类型的复杂变量。

所有声明好的变量和方法，如果想在 template 模板里使用的话，必须在 setup 方法里 return，否则无法调用。记住返回什么就是声明，如返回 count，模板中就用 {{ count }}，返回 state，模板中就使用 {{ state.a }} 。效果如下所示：

待办事项 TODO

首先我们新建 views 文件夹用于放置页面组件，在 views 内新建 todo.vue 文件，如下所示：

引入 antd-v 的布局组件，再给一些基础样式。

然后前往 App.vue 和 router/index.js 做如下改动：

// App.vue

import {createRouter, createWebHashHistory} from 'vue-router'

export default createRouter({

  history: createWebHashHistory(),

  routes: [

    {

      path: '/todo',

      component: () => import('../views/todo.vue')

    }

  ]

})

最后页面出现如下所示，代表配置成功：

添加新增待办事项输入框：

如下图所示：

添加“待办事项”和“已办事项”模板，代码如下：

效果如下：

接下来我们来添加代办的相应逻辑：

深圳网站建设www.sz886.com