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

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

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


Это может показаться менее гибким, поскольку он не дает нам возможность выбирать шаблон, но настройка по умолчанию уже проста, как простой шаблон, но сложный, как расширенный шаблон 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

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

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

Сохраняющиеся пресеты

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

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

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

    {
      "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

Репо должно содержать файл root 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 после установки нового, вы получите это сообщение в консоли:

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

    npm install -g @vue/cli-init

    # OR

    yarn global add @vue/cli-init

Затем вы можете запустить старую команду:

    vue init webpack testing-old-cli

Вывод

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