Быстро создайте проект Vue3 + TypeScript

внешний интерфейс JavaScript
Быстро создайте проект Vue3 + TypeScript

Vue3 выпустил бета-версию, я пытаюсь испытать следующее семейство Vue3 + TypeScript в новом проекте, проект, чтобы построить процесс принятия этой записи.

Инициализируйте проект с помощью Vue Cli

Автор установил последнюю версию Vue Cli.Если вы не установили последнюю версию Vue Cli на свой компьютер, вы можете перейти на официальный сайт, чтобы установить ее.

npm install -g @vue/cli

Затем используйте Vue Cli для инициализации базового проекта Vue.

vue create vue3-project

Поскольку необходимо использовать такие параметры, как TypeScript и Vue Router, мы выбираем здесь характеристики пользовательской инициализации, поэтому рекомендуется проверить эти параметры:

1.png

Обновление до проекта Vue 3.x

Здесь вам нужно использовать официальный Vue, предоставленныйvue-cli-plugin-vue-nextПлагин, этот плагин помогает нам обновить обычные проекты, созданные Vue Cli, до бета-версии Vue 3.x.

vue add vue-next

После установки наш проект не может запускаться напрямую, нам нужно внести некоторые изменения вручную. Поскольку компоненты в нашем проекте написаны на основе синтаксиса Vue 2.x, мы сначала делаем некоторое вычитание, удаляем компоненты в проекте, а затем заменяем их компонентами, использующими синтаксис Vue 3.x.

Измените модуль маршрутизатора

Этот шаг прост, потому что последняя версияVue-RouterзаменяетсяcreateRouterЧтобы создать экземпляр маршрутизатора в виде, мы следуемVue-RouterПоследняя версия операции документа может быть.

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
  },
];

// 使用createRouter来创建Router实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Изменить модуль магазина

Чтобы проверить тип параметра,VuexОн также использует фабричные функции для создания экземпляров Vuex.Автор написал здесь простейший модуль хранилища:

import { nextTick } from 'vue';
import { createLogger, createStore, ActionContext } from 'vuex';

interface State {
  title: string;
}

export default createStore({
  state(): State {
    return {
      title: '',
    };
  },
  mutations: {
    setTitle(state: State, title: string) {
      state.title = title;
    },
  },
  actions: {
    async nextTickSetTitle({ commit }: ActionContext<State, State>, title: string) {
      await nextTick();
      commit('setTitle', title);
    },
  },
  plugins: process.env.NODE_ENV === 'development' ? [createLogger()] : [],
});

Минимальный пример компонента

начать использоватьCompoisition APIЧтобы написать простейший пример компонента, способ использования Vuex в компоненте изменен наuseStoreAPI, как показано в следующем примере, обратите внимание, что скрипт должен объявитьlang="ts":

<template>
    <div class="home">
      <div>{{ title }}</div>
      <button @click="setTitle('setTitle')">setTitle</button>
      <button @click="nextTickSetTitle('nextTickSetTitle')">nextTickSetTitle</button>
    </div>
</template>

<script lang="ts">
import {
  defineComponent, computed, onMounted, onUpdated, onUnmounted,
} from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'hello world',
  props: {},
  setup() {
    const store = useStore();
    const title = computed(() => store.state.title);

    const setTitle = (nextTitle: string): void => {
      store.commit('setTitle', nextTitle);
    };
    const nextTickSetTitle = async (nextTitle: string): Promise<void> => {
      await store.dispatch('nextTickSetTitle', nextTitle);
    };

    onMounted(() => {
      console.log('onMounted');
    });
    onUpdated(() => {
      console.log('onUpdated');
    });
    onUnmounted(() => {
      console.log('onUnmounted');
    });

    return {
      setTitle,
      nextTickSetTitle,
      title,
    };
  },
});
</script>

резюме

Эта статья очень проста.Это всего лишь краткое изложение авторской конструкции проекта Vue 3.x.Что касается принципов Vue 3.x, автор также написал несколько связанных статей.Заинтересованные читатели могут обратиться к ним и узнать вместе.

Категории