Первый опыт Vue3.x в сочетании с машинописным текстом

Vue.js

1. Цели дизайна Vue3.0

  • Меньше\быстрее - Vue 3.0 уменьшил размер примерно вдвое, всего 10 КБ.
  • Расширенная поддержка TypeScript
  • Улучшите согласованность дизайна API — легко читается
  • Улучшить собственную ремонтопригодность
  • Открыть больше низкоуровневых функций

Vue3.x организует код в виде Function-based API, что упрощает сжатие кода и имеет более высокую эффективность сжатия.Из-за модификации метода объявления компонентов логика завершается в виде комбинации функций, что естественно сочетается с машинописным текстом. (Компоненты в vue2.x передают серию опций по объявлению, поэтому использование typeScript под 2.x требует декораторов.vue-class-componentпросто сделай это)

  // vue2.x 要想使用ts 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html
<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    @Component
    export default class App extends Vue {}
</script>

2. Каковы преимущества машинописного текста

1. Повысить читабельность и ремонтопригодность кода

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

2. Сообщество активно, и Дэниел его использует

  • Благодаря повальному увлечению vue3 машинописный текст станет мейнстримом, учитесь быстро

В-третьих, создайте среду vue3.x + typescript + vue-router.

1. Установите vue-cli глобально

npm install -g @vue/cli

2. Инициализируйте проект vue

vue create vue-next-project

Здесь, после ввода команды, вам нужно выбратьManually select features, по меньшей мереbabel typescript routerвыбрано, (vuexпосмотрите, нужно ли вам это). Как показано ниже:

Не уверен, на что может ссылаться vue-cliстатья

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

cd vue-next-project
vue add vue-next

Эта команда автоматически поможет вам обновить vue2.x до vue3.x, включая соответствующие зависимости в проекте для обновления и замены кода шаблона, например:vue-router vuex

После выполнения трех вышеперечисленных шагов основная среда считается завершенной.Видите, что в только что созданной директории есть конфигурационный файл tsconfig.json.Вы можете настроить его в соответствии со своими потребностями и потребностями проекта.

Затем нам нужно выполнить простой процесс, чтобы он поддерживал форму машинописного текста. (Шаблон cli не усовершенствовал код шаблона машинописного текста)

  • Будуshims-vue.d.tsИзмените содержимое файла, и этот шаг должен привести к меньшему количеству ошибок.
// declare module "*.vue" {
//   import Vue from 'vue';
//   export default Vue;
// }
declare module "*.vue" {
    import {defineComponent} from 'vue'
    const Component: ReturnType<typeof defineComponent>;
    export default Component
}
  • Компоненты должны быть объявленыscript lang="ts", затем используйтеdefineComponent Просто заверните его.
<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  onUpdated,
  onUnmounted,
} from "vue";

export default defineComponent({
  name: "hello world",
  props: {},
  setup(props: any) {
    const count = ref(0);
    const increase = (): void => {
      count.value++;
    };
    function test(x: number): string {
      return props.toString();
    }
    test(1);
    // test('number');
    // 生命周期
    onMounted(() => {
      console.log("mounted vue3 typescript");
    });
    onUpdated(() => {
      console.log("updated vue3 typescript");
    });
    onUnmounted(() => {
      console.log("onUnmounted vue3 typescript");
    });
    // 暴露给模板
    return {
      count,
      increase
    };
  },
});

</script>

корреспонденция жизненного цикла

В-четвертых, прикрепите официальные читы для изучения vue-next и typescript

5. Если вы не хотите собирать, вы также можете вытащить его прямо на демо-версию github.

среда vue3+typescript

другие виды статей

Категории