Первый опыт Vue CLI 3.X

внешний интерфейс Командная строка TypeScript Vue.js

Поскольку я только недавно изучил машинописный текст, я хочу найти проект для просмотра.Кроме того, я слышал, что vue-cli 3.0 начал поддерживать автоматическое создание среды разработки на основе машинописного текста, поэтому я также установил опыт.Я кратко расскажу обо всем процессе опыта. , Предупреждение о нескольких картинках! Предупреждение о множестве изображений!

vue-cli 3.0 был переименован в @vue/cli, давайте сначала установим его глобально

npm install -g @vue/cli
或者
yarn add global @vue/cli

После установки вы можете проверить, установилась ли она.Версия, которую я установил здесь,@vue/cli@3.0.0-beta.6

npm list -g --depth 0

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

Далее запустите команду для создания проекта

vue create <project-name>

Выберите конфигурацию, конфигурацию по умолчанию или вручную, здесь я выбираю Вручную

Настройте связанные плагины и функции

Здесь выберите некоторые плагины и функции, которые вам нужны, я хочу попробовать машинопись, поэтому я выбираю,

  • typescript

  • vue-router

  • vuex

  • css-препроцессор

  • проверка формата

  • модульный тест

    Следует ли использовать синтаксис компонента в стиле класса, выберите y здесь, и скаффолдинг поможет нам установить следующие компоненты.

  • vue-class-component

  • vue-property-decorator

    Использовать ли babel для побега, выберите y
    Выберите язык предварительной обработки css, здесь я выбираю МЕНЬШЕ
    Выбираем правило проверки, я выбираю TSLint
    Выберите, когда проверять

  • Подтвердить при сохранении

  • Проверяйте при отправке

    я выбираю первое

    Выберите конфигурацию модульного теста здесьMocha + Chai
    Вот файл конфигурации с вопросом, как хранить babel, postcss, eslint и т. д.

  • отдельное хранилище

  • интегрирован в package.json

    Я выбираю первый предмет и храню его отдельно

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

yarn serve

После запуска службы откройте соответствующий URL-адрес в браузере, чтобы увидеть результат.

Анализ проекта

Давайте посмотрим на каталог сгенерированного проекта.Мы видим, что проект сильно упростился, и нет таких каталогов, как config и build.Так как я настроил проект typescript, в каталоге просмотра есть еще один проекта.shims.d.tsФайл объявления, в корневом каталоге есть файл конфигурации tstsconfig.json

Мы нажимаем на файл package.json, чтобы увидеть компоненты с некоторыми модификаторами, добавленными в каталог.
Видя эту проблему, как мы можем изменить конфигурацию проекта без каталога сборки? Например, я хочу изменить порт отладки.На самом деле мы можем добавить файл vue.config.js в корневую директорию проекта, конфигурация выглядит следующим образом

module.exports = {
  devServer: {
    port: 8989
  }
}

После сохранения и перезапуска сервера вы можете увидеть, что порт был изменен нами.Чтобы получить подробные элементы конфигурации vue.config.js, пожалуйста,кликните сюда

Первый опыт проекта

Далее давайте попробуем написать что-нибудь на машинописном языке и испытать это на себе. Щелкните файл HelloWorld.vue в каталоге компонентов и обнаружите, что редактор на самом деле рисует красную линию, что ненаучно.

Давайте просто изменим код

На самом деле эта проблема вызвана плагином vetur на моем редакторе, который совершенно случайно ранит дружественные войска. По этому вопросу пожалуйстаПосмотреть причину ошибки

Давайте перейдем к коду ts, здесь я определяю данные, затем меняю их, а затем прослушиваю это событие.

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

@Component
export default class HelloWorld extends Vue {
  protected testdata: number = 666;
  @Prop() private msg: string|any;
  @Watch('testdata')
  public onTestDataChanged(val: number, oldVal: number) {
    alert(`当前的值为：${val}`);
  }
  private mounted() {
    alert(`当前的值为: ${this.testdata}`);
    setTimeout(() => {
      this.testdata = 999;
    }, 500);
  }
}

Текущие результаты следующие, вы можете видеть, что результаты достигнуты, как и ожидалось.

Эпилог

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

  • Справочная документация

Начните работу с последними скаффолдингами vue за 10 минут

Категории