Главная » Статьи » Как новый Vue CLI упрощает разработку

Как новый Vue CLI упрощает разработку

Как новый Vue CLI упрощает разработку

От автора: разработчики, переходящие с React на Vue, не имеют лучшего опыта работы с инструментами или довольно перегружены процессом подготовки. React имеет приложение create-response-app, которое может настроить полномасштабный проект, одновременно скрывая внутреннюю логику инструментов (webpack, Babel и т. д.). У Vue также есть инструмент командной строки (CLI), но он не настолько интуитивно понятен, как ожидается разработчиками.

Команда Vue запускает новую версию инструмента CLI (3.0). Новая версия теперь предлагает те же функции, что и приложение create-react-app, и многое другое. В настоящее время инструмент находится в стадии бета-тестирования, но мы уже можем использовать его. Я покажу вам некоторые функции этого инструмента, а также то, как новый Vue CLI изменит ваш опыт разработки.

Старый в сравнении с новым

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

Установка

Чтобы установить старый инструмент CLI, мы обычно делали это:

npm install -g vue-cli

Новая версия инструмента CLI находится под пространством имен @vue и должна устанавливаться следующим образом:

npm install -g @ vue / cli

Обе установки позволяют вам настроить проект Vue с помощью команд, которые они предоставляют.

Создание нового проекта Vue

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

vue init <template> <name>

Где: <template> — это имя шаблона, которое будет использоваться, и <name> — это то, как вы хотите назвать свой проект.

Шаблоны бывают разные: от простой настройки прототипа до расширенной настройки webpack. Для 3.0 и выше, вам нужно будет сделать только это:

vue create <name>

Как новый Vue CLI упрощает разработку

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

Структура дерева

Старая:

. ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ ├── prod.env.js │ └── test.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ └── main.js ├── static └── test ├── e2e │ ├── custom-assertions │ ├── nightwatch.conf.js │ ├── runner.js │ └── specs └── unit ├── jest.conf.js ├── setup.js └── specs

Новая:

 . ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── main.js

Вы видите в сравнении, как выглядит сжатый каркас новой CLI. Меньше отвлечения внимания и сразу к делу. Я игнорировал такие файлы / каталоги, как .gitignore, node_modules и т. д., так как они являются контентом поддержки и не имеют отношения к сравнению.

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

Zero-config прототипирование

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

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

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

<!-- MyCard.vue --> <template> <div class="card"> <h1>Card Title</h1> <p>Card content goes here. Make sure it's not Lorem.</p> </div> </template>

Затем установите адд-он для обслуживания прототипов:

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

Убедитесь, что вы находитесь в той же папке, что и MyCard.vue, а затем запустите через терминал:

vue serve MyCard.vue

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

Как новый Vue CLI упрощает разработку

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

Как новый Vue CLI упрощает разработку

Пресеты

Другой способ, с помощью которого новый CLI упрощает разработку — это концепция пресетов. При создании нового проекта с помощью команды create, CLI задает несколько вопросов, которые он использует для настройки нового проекта.

Иногда эти вопросы кажутся излишними. Если я всегда буду использовать ESLint, то в чем смысл спрашивать об этом при каждом создании проекта. С помощью пресетов я могу создать повторно используемую конфигурацию, и CLI будет использовать эту конфигурацию, не задавая мне дополнительные вопросы.

Откройте с помощью редактора файл ~/.vuerc и добавьте в него следующие установки:

{ "useConfigFiles": true, "router": true, "vuex": true, "cssPreprocessor": "sass", "packageManager": "yarn", "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "airbnb", "lintOn": ["save", "commit"] } } }

Когда вы запустите команду create, vue CLI будет использовать эту конфигурацию для установки нового проекта. Вы также можете использовать удаленный пресет с Github:

vue create --preset username/repo my-project

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

Простая конфигурация

Вы можете расширить / настроить конфигурацию процесса сборки в файле vue.config.js. Убедитесь, что у вас этот файл находится в корне проекта Vue. Вы можете делать такие вещи, как изменение базового URL-адреса, а также выходного каталога сборки. Вы также можете расширить конфигурацию webpack. Например:

// vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } }

configureWebpack также может быть функцией, принимающей существующую конфигурацию, которая может либо изменяться, либо возвращаться:

// vue.config.js module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // mutate config for production... } else { // mutate for development... } } }

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

Предпочитаете старый CLI?

Я настоятельно рекомендую вам переходить на новый CLI, когда он будет официально выпущен. Если по какой-либо причине вам нужно использовать старый CLI после установки нового, вы получите в консоли это сообщение:

Как новый Vue CLI упрощает разработку

Это само собой разумеется. Вам нужно установить адд-он, чтобы иметь возможность использовать старую версию:

npm install -g @vue/cli-init # OR yarn global add @vue/cli-init

После этого вы сможете запускать старые команды:

vue init webpack testing-old-cli

Заключение

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

Автор: Chris Nwamba

Источник: https://blog.pusher.com/

Редакция: Команда webformyself.