Рубрики
Без рубрики

Начало работы с Vue CLI 3.x

Автор оригинала: Lucas Otero.

Вступление

Vue.js это ракета до неожиданных высот после превышения React.js В Github Stars, несмотря на не поддержание какой-либо крупной компанией, а выпуск их нового инструмента управления командной строкой (CLI) может очень хорошо ударить их еще выше!

Леса Vue Проект с нуля может быть непростым подходом, особенно если вам не особенно комфортно с Vue.js Отказ

Вот почему Vue Cli Является ли обязательным инструментом под вашим арсеналом, чтобы убедиться, что ваши проекты будут правильно настроены из Get-Go, позволяя вам выбрать из нескольких шаблонов и позволить CLI сделать все возможное для вас кодовой код труда для вас.

Увлекательно достаточно, это прошлым летом принес нам Vue CLI 3.0 Представляем кучу прохладных новых функций, таких как Vue Графический интерфейс пользователя Создание создания проекта и управляющих зависимостями проще, чем когда-либо прежде!

CLI Service.

CLI Service – это зависимость в разработке, построенная на вершине WebPack , статический модуль Bundler для приложений JavaScript – который очень похож на React-Scripts для React.js Отказ

Он отвечает за загрузку плагинов, убедившись, что конфигурация WebPack оптимизирована и позволяет нам иметь основные команды для управления нашей приложением (служить, сборки, линтами и т. Д.).

Предпосылки

Для Vue CLI для работы вам нужно будет установить Node.js (версия 8.9+) На вашем компьютере, чтобы убедиться, что вы сможете использовать NPM (управляющий узел пакета) или Пряжа в зависимости от вашего предельного менеджера.

Монтаж

После того, как узел загружен, установка VUE CLI так же просто, как выполнение простой команды в вашей командной строке:

$ npm install -g @vue/cli

Или для пряжи:

$ yarn global add @vue/cli

Ваш первый проект Vue.js

После того, как вы установили Vue CLI во всем мире, вы сможете получить доступ к Vue Команда из любого места на вашем компьютере, и вам понадобится, чтобы создать свои проекты BoaterPlate.

Существует несколько способов создания проекта просто запущенных команд:

$ vue create

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

Сначала он спросит вас, хотите ли вы использовать предустановку:

Vue CLI v3.2.1
? Please pick a preset:
> default (babel, eslint)
 Manually select features

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

Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

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

  • Бабел Для транспортировки вашего кода на es5 javascript, который может понять каждый браузер.
  • Tymdercript Если вы хотите иметь сильные тепы и получить доступ к более современным функциям в вашем коде JavaScript.
  • Поддержка прогрессивного веб-приложения (PWA) Если вы хотите использовать PWA ориентированные на себя такие особенности, как обслуживание-работники и офлайн поддержки.
  • Маршрутизатор который добавит Vue-маршрутизатор Пакет, который является потрясающим инструментом маршрутизации для ваших приложений для одной страницы (SPA). Вам будет предложено, если вы выберете эту опцию, чтобы выбрать, если вы хотите иметь История Режим включен для маршрутизатора, который удаляет # подписать со всех ваших конечных точек.
  • Vuex Чтобы иметь централизованный магазин для своих состояний и управлять глобальными данными вашего приложения, а также управление тем, как изменены данные в ваших компонентах, и откуда из Vue devtools. (См. Vue devtools ).
  • Предварительные процессоры CSS Чтобы выбрать предварительный процессор CSS, если вы выберете эту опцию, вам будет предложено выбрать между Sass/меньше , Меньше или Стилус Отказ
  • Линтер/форма Это добавит линтирование в ваш проект, чтобы убедиться, что ваш код должен соответствовать стандартам кода. Если вы выберете эту опцию, и вы выбрали Tymdercript Вам будет предложено выбрать Linter/Formatter как таковой, если вы не выбрали TypectScript, вам не будет предложено Цлинт Отказ
? Pick a linter / formatter config: (Use arrow keys)
> TSLint
 ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config
 ESLint + Prettier

Кроме того, вы можете выбрать, если вы хотите добавить Гитики к вашей конфигурации. Они будут запускать ваши сценарии извлечения/форматирования при сохранении или совершения вашего хранилища GIT.

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
  • Устройство тестирования позволит вам выбрать свою структуру тестирования подразделения по выбору.
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
 Jest
  • E2E Тестирование Так же, как тестирование подразделения, предложит вам выбрать среду тестирования E2E.
? Pick a E2E testing solution: (Use arrow keys)
 Cypress (Chrome only)
 Nightwatch (Selenium-based)

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

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

Плагины CLI

Некоторые встроенные плагины могут быть добавлены с помощью команды, например Vuetify , рамки дизайна материала для Vue.js:

$ vue add

Плагин Vue CLI как их имена начинаются с @ Vue/cli-plugin- или Vue-cli-plugin- – В зависимости от того, являются ли они встроенные или сторонние плагины.

Когда вы запускаете vue-cli-service , он автоматически загружает все плагины CLI, перечисленные внутри Package.json файл.

Поздравляем, вы только что создали свой первый проект Vue CLI!

Vue графический интерфейс пользователя

Если вы не хотите проходить через хлопот командных строк, или вы просто не любите темные фоны с белыми линиями, вы всегда можете использовать Vue GUI Доступно по этой команде:

$ vue ui

Когда эта команда запускается, сервер запустится на http://localhost: 8000 Отказ

Здесь вы можете создавать свои проекты таким же образом, как и в командной строке, но с хорошим пользовательским интерфейсом.

create_project.

Кроме того, вы можете управлять своими зависимостями без необходимости управлять их от Package.json , который поставляется с нужной версией для каждого пакета:

зависимости

Дополнительные конфигурации и виджеты могут быть настроены, и несколько задач могут быть автоматически запускаются от Vue-интерфейса – такие как запуск проверки уязвимости для ваших зависимостей, которые могут иметь проблемы безопасности, настроив порт, который вы можете убить, чтобы закрыть свое приложение И включите корм новостей иметь последние обновления от команды Vuue!

способствовать
$ vue-init < template > < project name >

Всякий раз, когда вы хотите использовать устаревшие шаблон Vue CLI 2.x, вам нужно установить Vue-init услуга:

$ npm install -g @vue/cli-init

а потом:

$ vue init webpack my-project

Тогда вы сможете настроить свой проект, поскольку вы будете регулярным проектом.

Структура папки

Folder_Structure.

Каждый созданный проект поставляется с несколькими папками, которые настроены для простоты использования:

  • /node_modules Именно здесь все упакованные зависимости будут установлены, по умолчанию они устанавливаются всякий раз, когда вы создаете проект.
  • /публики Вот где index.html Живет и там, где должны быть созданы все общественные активы, проявляются и служебные работники.
  • /SRC Там, где будут добавлены главный хлеб и мясо вашей работы, большинство других файлов из других папок предварительно настроены, но именно здесь вы добавляете весь свой пользовательский код и компоненты.
  • /SRC/Активы Где вы добавляете свои изображения, значки, шрифты, которые будут добавлены в позже, будут добавлены к /dist папка.
  • /SRC/Компоненты Это то, где вы добавляете свои компоненты, в частности, ваши единые компоненты, которые не представляют собой целую страницу.
  • /src/просмотры Здесь у вас есть компоненты макета.
  • /test Где проживает ваше устройство/E2E тесты.

Плюс, а /плагины Папка будет добавлена до тех пор, пока вы использовали Vue Добавить Команда, где все ваши плагины будут установлены.

Кроме того, main.js , Router.js , store.js и App.vue Будут автоматически генерироваться в соответствии с вашими конфигурациями, выбранными во время создания, наряду с некоторыми примерами котельной.

Package.json file.

Это один из самых важных файлов, который содержит большую часть конфигурации ваших проектов, как Имя , Версия , Автоматические скрипты, которые вы можете использовать через NPM, и зависимости, которые являются сторонние пакеты, которые вы можете использовать в вашем проекте:

{
  "name": "vue-cli-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-plugin-unit-jest": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-prettier": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
    "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {},
      "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Тег сценариев открывает ваши основные ручки для управления вашим приложением.

Запуск следующего начнется ваш сервер разработки с горячей перезагрузкой:

$ npm run serve

Это означает, что он заметит изменения файла, чтобы вам не нужно перезапустить сервер каждый раз, когда вы обновляете свой код или ресурсы.

Теперь, чтобы создать /dist Папка, которая упадет все ваши приложения, нет WebPack или любые дополнительные конфигурации, необходимые, мы будем использовать:

$ npm run build

Это доставит index.html , со всеми файлами JavaScript введены автоматически, а JS , CSS и IMG Папки для этих именованных активов.

Более того, если вы хотите посмотреть все ваши файлы и обработать их, используя ваши эсценеры или красивые конфигурации, вы можете использовать:

$ npm run lint

Соответственно, модульные тесты, расположенные внутри /тесты Папка может быть запущена со следующей командой:

$ npm run test:unit

Плюс, Package.json Может удерживать специфическую конфигурацию для льмина, форматирования, предварительно совершаемых крючков, и многие другие!

Развертывание

/dist Папка может быть обработана, чтобы загрузить ваше подключение к страницам GitHub, Heroku, Amazon S3, страницы Bitbucket и многих других услуг.

В зависимости от вашего хоста выбора вам нужно будет настроить /dist Папка, чтобы соответствовать потребностям вашего сервера, это можно легко сделать через vue.config.js Файл (или через вкладку конфигурации Vuue UI для этого значения), которая должна быть создана в корневой папке вашего проекта:

module.exports = {}

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

Если ваш сервер ждет вашего приложения для размещения на определенной конечной точке, например: http://www.testsite.com/test – Вам нужно будет настроить свой BaseUrl Чтобы приспособиться к этой конечной точке:

module.exports = {
  baseUrl: '/test'
}

С другой стороны, если ваш сервер ждет ваших статических файлов в определенной папке, вы также можете указать его, или если вы хотите иметь /dist Папка названа по-разному, вы можете выбрать свой Opdeddir :

module.exports = {
  baseUrl: '/test',
  assetsDir: 'static',
  outputDir: 'app'
}

Это просто примеры многих конфигураций, которые вы можете добавить в ваш проект.

Вы можете добавить все это внутри вашего Package.json внутри Vue Свойство, но обратите внимание, что вам придется использовать только совместимые JSON.

Заключение

Vue.js растет сильный среди других основных структур JavaScript. Это вполне доступно, прямое и очень устойчивое.

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

К счастью, Evan You, Создатель Vue всегда думает, и всегда поднимается для своих собратьев, делая настройку и настройку новых приложений как 1, 2, 3!

Для получения дополнительной информации вы можете посетить, Официальная страница Vue CLI Отказ

Читайте ещё по теме: