Введение в vue-cli 3.0

внешний интерфейс Vue.js

Введение в vue-cli 3.0

Установка среды

Совершенно новая версия строительных лесов, очень прочная, запомните название@vue/cli, все верно, можно установить с помощью npm или yarn, сначала убедитесь, что он есть в глобальном окружении.


   npm install -g @vue/cli

   yarn add global @vue/cli

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

Сравните с предыдущим здесь2.XПредыдущая версия, новая версия поставил插件а также模板Ожидание переноса на интерфейс командной строки.

старая версия создать команду
2.x vue init <template-name> <project-name>
3.x vue create <project-name>

Вот картинка, шаблонов по умолчанию уже несколько, выбираем последнийManually select features

vue-cli3.0Будет функция сохранения текущей конфигурации после ее создания.

Настройка подключаемых модулей и функций проекта

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

  • TypeScript
  • PWA
  • Vue-router
  • Vuex
  • CSS预处理
  • eslint prettier
  • 自动化测试单元测试 、e2e

я выбираю здесьLESS

я выбираю здесьeslint + prettier

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

Здесь плагин модульного тестирования, который я выбираюjest

здесьbabel,postcss,eslintгде находятся эти файлы конфигурации

  1. Автономное размещение файлов
  2. ставитьpackage.jsonвнутри

Личные предпочтения здесь я ставлю самостоятельно

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

ок После окончательного подтверждения дождитесь установки

Ура, готово

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

  1. Войдите в каталог и запустите проект здесьvue-cli 3.xПо умолчанию браузер будет открыт, и адрес также будет набран в консоли.
   
   yarn serve 
   // OR
   npm run serve

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

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

Первый взгляд на общий каталог2.xраньше сильно упростили

Избавиться2.x buildиconfigи другие каталоги, большая часть конфигурации интегрирована вvue.config.jsвот

В vue.config.js
Вероятно, это включает в себя конфигурацию Общие имена выходных путей, каталоги следования, предварительную обработку, конфигурацию devServer, pwa, dll, сторонние плагины и т. д.
Подробную настройку смотрите в официальной документацииПодробная конфигурация конфигурации

как делать все, что хочешь

1. Модификация конфигурации сервера

Здесь я сначала меняю порт, модифицируюvue.config.jsЗатем перезапустите проект, вы увидите, что он был изменен на5999порт вверх

module.exports = {
  lintOnSave: false,
  devServer: {
    port: 5999
  }
}

2. Общая модификация конфигурации веб-пакета

webpackКонфигурация изменена в этом свойствеconfigureWebpack  

включаютpluginsЕго также можно расширить самостоятельно. Youda уже инкапсулировала все часто используемые. Если вас что-то не устраивает, вы можете расширить его самостоятельно.


这里改个webpack devtool输出方式、默认那个我属实不知道怎么跟踪代码

configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
        config.devtool = 'source-map'
        // mutate config for production...
    } 
}

Другие конфигурации не будут вводиться одна за другой, подробнее см. здесь.webpack

3. Установка глобальных переменных

Создайте два файла в корневом каталоге проекта

.env.development
.env.production

Настройте пару ключ-значение внутри.

Но учтите, что здесь должно бытьVUE_APPначало

Чтобы мы могли настроить глобальную переменную в определенном режиме

    VUE_APP_MOCK_URL = 'http://xxxx.xxx.xx.xx/mockjs/'

вот так вaxiosВы можете настроить корневой путь в


const service = axios.create({
    baseURL: process.env.VUE_APP_MOCK_URL
})

Суммировать

В этой статье используетсяvue-cli3.xОт среды до создания, настройки и общих навыков проекта кратко представлены в надежде помочь тем, кто только использует его.

Библиография
Авторgithub

Категории