Создайте проект с vue cli3 в правильном положении

Vue.js
Создайте проект с vue cli3 в правильном положении

предисловие

В августе 2019 vue-cli был обновлен до версии 3.X. Новая версия скаффолдинга имеет более высокую степень инкапсуляции и намного проще в настройке. Она направлена ​​на то, чтобы пользователи могли сосредоточиться на написании бизнес-кода. Я из vue- cli2 Переход с .X на 3.X вполне адаптируемый.Ведь скаффолдинг 3.X был автоматически построен на webpack4, поэтому нет необходимости обновляться с webpack3 на webpack4.Конечно, производительность также улучшилась много, поэтому рекомендуется использовать версию cli3.X.Создайте свой собственный проект и используйте это руководство, чтобы ознакомиться с использованием vue cli3 для создания проекта vue.

Система управления фоном, разработанная на основе vue cli3, адрес проектаvue-admin-webappДобро пожаловать на звезду, вилка

Установить

Удалите старую версию:

Если вы ранее использовали vue-cli2.X, вам необходимо сначала удалить его:

#卸载vue-cli
npm uninstall -g vue-cli

Требуется интерфейс командной строки VueNode.js8.9 или новее (рекомендуется 8.11.0+). вы можете использоватьnvmилиnvm-windowsУправление несколькими версиями Node на одном компьютере.

Установите vue-кли:

npm install -g @vue/cli  // 安装cli3.x
vue --version 或者 vue -V  //查看版本是否为3.x

Vue CLI> = 3 и более старые версии используют то же самоеvueкоманда, поэтому Vue CLI 2 (vue-cli) перезаписывается. Если вы все еще хотите продолжить создание своего проекта с помощью 2.x, вы можете установить инструмент моста глобально:

npm install -g @vue/cli-init
# 然后你就可以继续使用vue init了
npm init webpack my-project

быстрое прототипирование

вы можете использоватьvue serveа такжеvue buildкоманду на один*.vueфайл для быстрого прототипирования, но для этого сначала необходимо установить дополнительное глобальное расширение:

npm install -g @vue/cli-service-global

После завершения установки создайте новую папку и создайте файл .vue, выполните следующую команду для запуска

vue serve app.vue  // 启动服务
vue build app.vue  //打包出生产环境的包

Как показано ниже, просто создайте файл app.vue и выполнитеvue serve app.vueпросто запустите службу

Это отличная функция дляЭто очень удобно для разработки библиотеки, компонента, небольших демонстраций и т. д.!

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

инициализация:

# 创建项目
vue create my-project // 其中my-project为项目目录名称

После того, как вы нажмете «Ввод», к вам по-прежнему будут приходить заблокированные репортеры.

Здесь есть два варианта:

  • default (babel, eslint)Конфигурация по умолчанию обеспечивает поддержку babel и eslint.
  • Manually select featuresВручную выберите необходимую конфигурацию

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

Для каждой функции сделайте краткое описание:

  • BabelВ основном для преобразования синтаксиса es6 в совместимый js (выбрано)
  • TypeScriptПоддерживает написание кода с использованием синтаксиса TypeScript.
  • PWA PWAслужба поддержки
  • RouterПоддержка плагина конфигурации маршрутизации vue (обычно выбирается)
  • VuexПоддержка режима управления состоянием программы vue (обычно выбирается)
  • CSS Pre-processorsПоддержка препроцессора css (обычно выбирается)
  • Linter / FormatterПоддержка проверки стиля кода и форматирования (проверено)
  • Unit Testingмодульный тест
  • E2E TestingE2E-тестирование

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

Введите после завершения выбора:

Это означает спросить, используете ли вы режим истории для этого проекта,Если вы выберете Y, вам нужно просмотреть фоновую конфигурацию для получения подробной информации.vueRouterОфициальное объяснение веб-сайта, здесь мы выбираем n

Введите после завершения выбора:

Здесь вас просят выбрать предварительную обработку css,Мой проект обычно использует SCSS, поэтому я выбираю первый, после возврата каретки:

Здесь вас просят выбрать способ форматирования вашего кода,Я использую VSCode, поэтому обычно выбираюESlint + Prettier, выберите Ввод:

Здесь он спрашивает вас, когда выполнять обнаружение правила кода,Как правило, вы выбираете сохранение, а затем обнаружение, т. е.Lint on saveВыберите «Ввод»:

Это спрашивает, куда поместить файлы конфигурации Babel, PostCSS, ESLint,Обычно мы размещаем его в отдельном месте, чтобы сохранить файл package.json в чистоте, поэтому выберите первый.Нажмите Enter:

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

По подсказке выполняем инструкциюcd my-projectзатем выполните командуnpm run serveЭто запускает проект

это открытоhttp://localhost:8080:

Когда нам нужно настроить конфигурацию, связанную с веб-пакетом, нам нужно создать ее в корневом каталоге проекта.vue.config.jsфайл, это будет@vue/cli-serverАвтоматическая загрузка, соответствующее содержание конфигурации будет очень подробно описано на официальном сайте, вы можетеНажмите, чтобы просмотреть

Когда нам нужно настроить конфигурацию веб-пакета, мы можем выполнять цепочку операций через свойство chainWebpack.vue inspect --mode production product.jsилиvue inspect > development.jsЧтобы управлять файлами конфигурации производственной среды и среды разработки, файлы содержат правила доступа к цепочке, чтобы мы могли изменять и добавлять конфигурацию веб-пакета с помощью цепных операций.

Что ж, весь проект инициализации выполнен, и следующий шаг — написание кода.Еще одна новая функция vue cli3 — использование графического интерфейса для создания/управления/запуска проектов.Я не буду говорить об этом здесь. можно перейти на официальный сайт, чтобы увидеть конкретный учебник.

Категории