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 如何声明变量,以及如何通过方法改变变量,代码如下:

<template>

  <a-button @click="add" type="primary">

    点我加{{ count }}

  </a-button>

  <a-button @click="add2('a')" type="primary">

    点我加a{{ state.a }}

  </a-button>

  <a-button @click="add2('b')" type="primary">

    点我加b{{ state.b }}

  </a-button>

</template>

<script>

import { ref, reactive } from 'vue'

export default {

  setup() {

    const count = ref(0)

    const state = reactive({

      a: 0,

      b: 0,

    })

    const add = () => {

      count.value += 1

    }

    const add2 = (type) => {

      state[type] += 1

    }

    return {

      state,

      count,

      add,

      add2

    }

  }

}

</script>

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

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

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

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

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

待办事项 TODO

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

<template>

  <div id="components-layout-demo-basic">

    <a-layout>

      <a-layout-header>待办事项</a-layout-header>

      <a-layout-content>内容</a-layout-content>

    </a-layout>

  </div>

</template>

<script>

import { ref, reactive } from 'vue'

export default {

  setup() {

  }

}

</script>

<style scoped>

  #components-layout-demo-basic {

    min-height: 100vh;

    max-width: 40%;

    margin: 0 auto;

    background-color: #ededed;

  }

  #components-layout-demo-basic .ant-layout-header,

  #components-layout-demo-basic .ant-layout-footer {

    background: #7dbcea;

    text-align: center;

    color: #fff;

  }

</style>

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

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

// App.vue

<template>

  <router-view></router-view>

</template>

<script>

export default {

  name: 'App'

}

</script>

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

export default createRouter({

  history: createWebHashHistory(),

  routes: [

    {

      path: '/todo',

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

    }

  ]

})

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

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

<template>

  <div id="components-layout-demo-basic">

    <a-layout>

      <a-layout-header>待办事项</a-layout-header>

      <a-layout-content>

        <a-input-search

          v-model:value="todo"

          placeholder="请输入要代办的事项"

          size="large"

          @search="addTodo"

        >

          <template v-slot:enterButton>

            <a-button>新增</a-button>

          </template>

        </a-input-search>

      </a-layout-content>

    </a-layout>

  </div>

</template>

<script>

import { ref, reactive } from 'vue'

import { ref, reactive } from 'vue'

export default {

  setup() {

    const todo = ref('')

    const addTodo = (value) => {

      console.log(value)

    }

    return {

      todo,

      onSearch

    }

  }

}

</script>

如下图所示:

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

<template>

  <div id="components-layout-demo-basic">

    <a-layout>

      <a-layout-header>待办事项</a-layout-header>

      <a-layout-content>

        <a-input-search

          v-model:value="todo"

          placeholder="请输入要代办的事项"

          size="large"

          @search="addTodo"

        >

          <template v-slot:enterButton>

            <a-button>新增</a-button>

          </template>

        </a-input-search>

        <h2 class="title">待办事项</h2>

        <a-card title="标题">

          <template v-slot:extra>

            <a-switch />

          </template>

          内通

        </a-card>

        <h2 class="title">已办事项</h2>

        <a-card title="标题">

          <template v-slot:extra>

            <a-switch />

          </template>

          内通

        </a-card>

      </a-layout-content>

    </a-layout>

  </div>

</template>

<script>

import { ref, reactive } from 'vue'

export default {

  setup() {

    const todo = ref('')

    const addTodo = (value) => {

      console.log(value)

    }

    return {

      todo,

      onSearch

    }

  }

}

</script>

<style scoped>

  #components-layout-demo-basic {

    min-height: 100vh;

    max-width: 40%;

    margin: 0 auto;

    background-color: #ededed;

  }

  #components-layout-demo-basic .ant-layout-header,

  #components-layout-demo-basic .ant-layout-footer {

    background: #7dbcea;

    color: #fff;

    text-align: center;

  }

  .title {

    margin: 0;

    padding: 10px;

  }

</style>

效果如下:

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

<template>

  <div id="components-layout-demo-basic">

    <a-layout>

      <a-layout-header>待办事项</a-layout-header>

      <a-layout-content>

        <a-input-search

          v-model:value="todo"

          placeholder="请输入要代办的事项"

          size="large"

          @search="addTodo"

        >

          <template v-slot:enterButton>

            <a-button>新增</a-button>

          </template>

        </a-input-search>

        <h2 class="title">待办事项</h2>

        <a-card :title="`${index + 1}、${item.time}`" v-for="(item, index) in todos" :key="item.id">

          <template v-slot:extra>

            <a-switch v-model:checked="item.done" @change="handleCheck(item, true)" />

          </template>

          {{ item.content }}

        </a-card>

        <h2 class="title">已办事项</h2>

        <a-card :title="`${index + 1}、${item.time}`" v-for="(item, index) in dones" :key="item.id">

          <template v-slot:extra>

            <a-switch v-model:checked="item.done" @change="handleCheck(item, false)" />

          </template>

          内通

        </a-card>

      </a-layout-content>

    </a-layout>

  </div>

</template>

<script>

import { ref, reactive, computed } from 'vue'

export default {

  setup() {

    const todo = ref('')

    const time = `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`

    const state = reactive({

      todoList: [

        {

          id: 1,

          done: false,

          time: time,

          content: '前往老八食堂,共进午餐'

        },

        {

          id: 2,

          done: false,

          time: time,

          content: '和giao哥合唱一曲'

        },

        {

          id: 3,

          done: false,

          time: time,

          content: '做点阳间的需求'

        }

      ]

    })

    // 添加待办事项

    const addTodo = (value) => {

      if(!value) {

        message.error('请输入待办事项')

        return

      }

      state.todoList.push({

        content: value,

        id: Date.now(),

        time: time,

        done: false

      })

      todo.value = ''

    }

    // 通过计算属性,计算出生成的代办事项列表

    const todos = computed(() => {

      return state.todoList.filter(item => !item.done)

    })

    // 通过计算属性,计算出生成的已办列表

    const dones = computed(() => {

      return state.todoList.filter(item => item.done)

    })

    // 修改状态方法

    const handleCheck = (item ,status) => {

      item.done = status

    }

    return {

      todo,

      addTodo,

      state,

      todos,

      dones,

      handleCheck

    }

  }

}

</script>

<style scoped>

  #components-layout-demo-basic {

    min-height: 100vh;

    max-width: 40%;

    margin: 0 auto;

    background-color: #ededed;

  }

  #components-layout-demo-basic .ant-layout-header,

  #components-layout-demo-basic .ant-layout-footer {

    background: #7dbcea;

    color: #fff;

    text-align: center;

  }

  .title {

    margin: 0;

    padding: 10px;

  }

</style>

深圳网站建设www.sz886.com