Боевая серия Vue3: сочетание Ant-Design-of-Vue для практики Composition API

внешний интерфейс Vue.js
Боевая серия Vue3: сочетание Ant-Design-of-Vue для практики Composition API

Vue 3После каминг-аута у многих возникают мысли: «Я должен снова научиться чему-то новому», «Я больше не могу учиться» и так далее.

Но у всего всегда есть две стороны: фронтальные знания быстро обновляются, что выгодно трудолюбивым студентам. Скорость итерации в компьютерной индустрии очень высока.В компьютерной области интерфейс рассматривается как фотографирование на пляже быстрее, чем раньше.

Я очень завидую своим одноклассникам, которые еще учатся в школе, потому что сегодняшние студенты колледжа обладают гораздо большим объемом информации, чем когда я учился в колледже. Надеюсь, вы сможете дорожить этой возможностью и хорошо усвоить новые знания.

Я думаю, что для изучения новой технологии лучше всего создавать сценарии использования через Demo и просматривать API. Насколько вам это нужно?

Вероятно, вы можете использовать любой API в любом сценарии, и в более простом смысле вы можете использовать предыдущийVue2.xкод, написанный сVue 3Рефакторинг без разбора.

Три способа сборки Vue3.0

На данный момент зданиеVue 3У проекта есть три пути.

1. Инструменты командной строки (CLI)

дляVue 3, вы должны использоватьnpmДоступно в Vue CLI v4.5 как@vue/cli@next. Для обновления вам необходимо глобально переустановить последнюю версию.@vue/cli:

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

2. Вите

Viteэто инструмент для веб-разработки, который позволяет быстро предоставлять код благодаря собственному методу импорта модуля ES.

Вы можете быстро настроить проект Vue с помощью Vite, выполнив следующую команду в терминале.

Используйте нпм:

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

3. Веб-пакет

Очень рано Vue-CLI не поддерживалVue 3Для создания проекта команда Vue сделала конфигурацию проекта Webpack наGithub, который можно клонировать непосредственно для использования.

git clone https://github.com/vuejs/vue-next-webpack-preview.git demov3
cd demov3
npm install
npm run dev

Не рекомендуется использовать этот метод, и теперь есть два вида выше~~

(Раньше я называл людей «Маленькие милашки», когда смотрел на звезды и луну, но теперь новые люди превосходят старых, и они называют их «миссис Ниу»)

Кодекс Практика

Выбираем относительно свежий Vite для сборки проекта, и играем на самом модном, если хотите. Моя локальная версия Nodev12.6.0, постарайтесь быть как можно более последовательным.

Построить проект

npm init vite-app todo-v3
cd todo-v3
npm install // 建议使用淘宝镜像 cnpm install
npm run dev

После запуска это выглядит следующим образом, что означает успех:

страница входа

Первое, что бросается в глаза, это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 управляется опцией режима истории или хэша.

В то время как в Vue 3 черезcreateRouterСоздайте экземпляр маршрутизации, атрибут истории используется в качестве параметра для управления режимом маршрутизации,createWebHashHistoryМетод возвращает хэш-режим,createWebHistoryВозвращается режим истории, и этот проект принимает режим хеширования.

Точно так же нам нужно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 для Vue3.

Antdv2.xЭто новое поколение библиотеки компонентов, адаптированное для Vue 3.0, разработанное г-ном Тан Цзиньчжоу (Hangzhou Xiaobao Online). Давайте попробуем. Здесь мы загружаем его с помощью следующей команды:

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: используется для объявления простых переменных примитивного типа, таких как одиночное число, логическое значение, строка и т. д.
  • реактивный: используется для сложных переменных типа ссылки на объект.

Все объявленные переменные и методы, если вы хотитеtemplateЕсли используется в шаблоне, он должен быть вsetupметодreturn, иначе его нельзя вызвать. Помните, что возвращается оператор, например returncount, используется в шаблоне{{ count }},вернутьstate, используется в шаблоне{{ state.a }}. Эффект следующий:

СДЕЛАТЬ СДЕЛАТЬ

Сначала мы создаем новый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>

Как показано ниже:

Добавьте шаблоны «to-do» и «to-do» со следующим кодом:

<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>

существуетsetupвнутреннее использованиеcomputedметод, получить функцию обратного вызова, переменные в функции обратного вызова будут отслеживаться, например, вышеstate.todoListнаходится под наблюдением, мыhandleCheckИзменение состояния задачи внутри метода также будетcomputedмонитор, так что он будет обновлятьtemplateшаблон, эффект следующий:

Суммировать

Vue 3.0 все еще имеет много знаний, которые стоит изучить. Вышеупомянутый контент просто научит вас, как начать работу и создать проект, и как использовать новый API для объединения библиотеки компонентов для практики. Я продолжу организовывать другие практические навыки в будущем Исходный код с открытым исходным кодом на GitHubvue3-examplesНа складе адрес склада:GitHub.com/новый Bee-Ltd/…, Этот репозиторий будет время от времени обновлять различные знания, связанные с Vue3.0, и различные советы по интеграции Demo и Vue3. Вы можете обратить на это внимание. Если у вас есть какие-либо предложения, вы можете оставить мне сообщение.

Категории