Научу вас создавать проект vue на основе машинописного текста

внешний интерфейс TypeScript Vue.js Vuex
Научу вас создавать проект vue на основе машинописного текста

С тех пор, как Youda запустила поддержку машинописного текста в vue в сентябре прошлого года, я всегда хотел попробовать его из коробки.Для внешнего интерфейса SR плавность vue и объектно-ориентированный характер ts очень красивы ~ Наконец, два несколько месяцев назад я нашел возможность попробовать комбинацию vue+ts. Kaiwen записывает процесс интеграции vue и ts, а также некоторые трудности, с которыми пришлось столкнуться.

vue

Большинство людей должны знать Vue, в конце концов, Vue существует бок о бок с React, поэтому я не буду подробно его представлять.

vue китайский официальный сайтУчебник на официальном сайте — лучший вводный урок

typescript

Я продвигал typescript в предыдущих статьях, кратко перечисляя преимущества ts

  1. Начатый с JavaScript, относящийся к JavaScript, машинописный текст представляет собой надмножество JavaScript, поэтому он может повторно использовать код JavaScript с использованием библиотек JavaScript.

  2. Он имеет преимущества использования JavaScript, кросс-браузерности, кросс-операционной системы и т. д.

  3. Идеи объектно-ориентированного программирования, мощная проверка типов

  4. Дафа с открытым исходным кодом — это хорошо

Если есть недостаток, он не очень подходит для слишком маленьких проектов.

Одних этих преимуществ достаточно, чтобы мы повеселились~

ТС установить

Сначала установите узел, затем установите пакет ts через npm.

npm install -g typescript

tsc -vПроверьте номер версии ts

Создать проект

Мы создадим проект через официальные леса Vue-Cli

Установите строительные леса и создайте проекты

  1. Выполните команду установки

npm install -g @vue/cli

После завершения установки вы можетеvue createБыстро создавайте строительные леса для нового проекта или напрямую черезvue serveСоздавайте прототипы новых идей.

  1. Создать проектvue create vue-tsvue-ts — название нашего проекта, после выполнения оно выглядит следующим образом

vue-create

Вы можете видеть, что есть несколько вариантов,xiaoliЭта опция была создана мной ранее и будет рассмотрена позже;defaultЗатем следует babel eslint, указывающий, что если он выбран, будут введены только babel и ealint;manually select featuresКак следует из названия, выбираем то, что хотим. Тогда выбираем третий

Как видите, в списке много вариантов, в основном мы используем vue+ts, поэтому выбираемbabel typescript router vuexОни, после выбора, следующие

Далее будет несколько вариантов да или нет, вы можете выбрать в соответствии с потребностями вашего собственного проекта, последний шаг,Save this as a preset for future projects?Если вы выберете «да», наш предыдущий выбор будет сохранен как предустановленный вариант, что удобно для последующего создания новых проектов одним щелчком мыши. После того, как все шаги выбраны, нажмите Enter и начните создавать файловую структуру проекта и тянуть пакет npm.

Структура проекта

Структура проекта следующая

public: используется для хранения статических файлов,index.htmlВ нее помещается входной файл, и файлы в этой папке не будут включены в упаковку вебпака;

src: хранит файл проекта проекта vue, который помог нам связать маршрутизатор и vuex, а файловая структура очень проста.

Прочее: webpack, babel и другие конфигурационные файлы

взять с машинописью

Проект находится в разработке и представленvue-class-component, для поддержки ТС или используйтеvue-property-decorator, эта библиотека является расширением предыдущей.

Ниже перечислены различные изменения в методе написания tsvue.

объявление компонента

Способ создания компонента становится следующим

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Test extends Vue {

}

объект данных

Создать данные в данных через конструктор

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Test extends Vue {
    private name: string;
    constructor() {
        super();
        this.name = 'xiaoli';
    }
}

Данные в data используются следующим образом

public getName(){
    return this.name
}

заявление реквизита

@Prop() public msg: string;
@Prop({ default: 'default value' }) propB: string
@Prop([String, Boolean]) propC: string | boolean

Использование функции жизненного цикла

public created(): void {
    console.log('created');
}

public mounted():void{
    console.log('mounted')
}

пользовательский метод

В js метод нужно объявить в объекте метода, который теперь выглядит следующим образом

public clickFunc(): void {
    console.log(this.name)
    console.log(this.msg)
}

Смотреть свойство прослушивания

@Watch('name',{ immediate: true, deep: true })
public onChildChanged(val: string, oldVal: string) {
    console.log('watch new name=' + val);
}

вычисляемые свойства

public get allname() {
    return 'computed ' + this.name;
}

allname — расчетное значение, name — отслеживаемое значение

эмитировать событие

@Emit()
  addToCount(n: number) {
    this.count += n
  }

  @Emit('reset')
  resetCount() {
    this.count = 0
  }

Имя первого событияadd-to-count,n- переданный параметр; имя второго событияreset-count, параметр пустой

Директивы и фильтры

---------- Небольшое обновление ---------------

Некоторые друзья спрашивали о способе написания инструкций и фильтров под ts, которые раньше были опущены, а теперь я их добавлю.

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

В ответе автора от 11 апреля он признал эту проблему, но неизвестно когда добавят формулировку директивы и фильтр, но автор дал решение в вопросе. Я пишу простой маленький каштан

пользовательская директива

// ./directive/index.ts
export const focus = {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el:HTMLElement) {
        // 聚焦元素
        el.focus()
      }
}

фильтр

// ./filter/index.ts
export const capitalize = function (value:string) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
}

используемые компоненты

import { capitalize }from '@/filter/index'
import { focus } from '@/directive/index'
@Component({
    filters:{capitalize},
    directives:{focus}
})
export default class Test extends Vue {}

<div>
    <input v-focus v-model="modelData">
    <div>{{modelData | capitalize}}</div>
</div>

Видно что это локальная ссылка, а глобальная ссылка еще не нашла решение.Добро пожаловать друзья у кого есть решение посоветуйте~

Комбинация vuex и ts

Поскольку vuex не является обязательным, он указывается отдельно. Сначала нужно процитироватьvuex-classВ библиотеке есть следующие модули

import {
    namespace,
    Action,
    Getter,
    Mutation,
    State
} from 'vuex-class';

Соответствующие действиям, добыче, мутации и т. Д. В Vuex соответственно. Воздействие использования TS на Vuex в основном находится на вызове Vuex по компонентам. Определение Vuex все еще может быть написано в соответствии с предыдущим методом.

@State('foo') stateFoo
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@Action('foo') actionFoo
@Mutation('foo') mutationFoo
@someModule.Getter('foo') moduleGetterFoo

// If the argument is omitted, use the property name
// for each state/getter/action/mutation type
@State foo
@Getter bar
@Action baz
@Mutation qux

Если вы не хотите использовать имя метода, определенное vuex, вы можете настроить имя атрибута, потому что все они определены в текущем this, поэтому вы можете напрямую использовать это для вызова

this.getterFoo // -> store.getters.foo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })

резюме

После того, как строительство будет завершено, вы можете провести переднюю часть так же, как заднюю часть ~

Категории