предисловие

Прошло почти полтора месяца с тех пор, как я присоединился к компании, и я отвечаю за бизнес-направление А. Проект включает в себя операционный фон, бизнес-клиент и т. д. Реконструкция модуля фона операции А была завершена ранее, а обновление проекта бизнес-клиента А было предварительно завершено недавно, поэтому сегодня я поделюсь новым проектом на основеvue-cli3Делайте апгрейды проекта.

*PS: Хоть это и хедлайнерская вечеринка, но **50%*Эта цифра не беспочвенна, и предварительные сравнения данных будут позже...

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

причина

Многие спросят, зачем нужно обновлять проект? Я не могу это описать, потому что среда каждой компании отличается

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

Первоначальный проект был основан наvue-cli2.8.1 + webpack2.2.1 + vue2.4.2(Не паникуйте, я также чувствую очень странную комбинацию версий, подумайте об этом, возможно, это была только модернизированная грамматика), первоначальный план состоял в том, чтобыwebpack2обновитесь доwebpack4, а затем добавить конфигурацию в проектeslint、GitHooks、Mock, и начните новый проект сразу, когда вы действительно начнете, на основеvue-cli3.3Построить.

Руки => завершение проекта заняло в общей сложности2.5небо

Предварительное сравнение новых и старых проектов

Поскольку проект не тестировался и не запускался, сравнение текущих данных среды генерации отсутствует.

один взглядnpm iа такжеnpm buildДо и после сравнения, ускорение50%Не слишком

	old	new
Пакет зависимостей	1604	1400
установка занимает время	37.507s	19.547s
много времени на постройку	24517ms	11569ms
объектный файл dist	714.57KB	657.94KB
eslint	-	стандартный (рекомендуется строгий режим)
GitHooks	-	✔️
имитация интеграции	-	✔️
Другие оптимизации		в ходе выполнения
...

Обновление Vue-cli3

Установить

отрывокvue-cli Документация

Имя пакета Vue CLI даетсяvue-cliизменился на@vue/cli. Если вы установили более старую версию глобальноvue-cli(1.x или 2.x), нужно пройтиnpm uninstall vue-cli -gилиyarn global remove vue-cliУдалите его. Требуется интерфейс командной строки VueNode.js8.9 или новее (рекомендуется 8.11.0+). вы можете использоватьnvmилиnvm-windowsУправление несколькими версиями Node на одном компьютере.

Этот новый пакет можно установить с помощью любой из следующих команд:

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

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

Вы также можете проверить правильную версию (3.x) с помощью этой команды:

vue --version

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

vue-cli Документация

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

vue create my-project

Далее выберите предустановку.

Вы можете выбрать предустановку по умолчанию, которая содержит основные настройки Babel + ESLint, или вы можете выбрать «Выбор функций вручную», чтобы выбрать нужные функции.

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

~/.vuerc Сохраненный пресет будет храниться в домашнем каталоге пользователя в файле с именем.vuercв файле JSON. Вы можете отредактировать этот файл, если хотите изменить сохраненный пресет/параметры.

Во время создания проекта вам также будет предложено выбрать предпочтительный менеджер пакетов или использоватьИсточник зеркала Taobao npmдля более быстрой установки зависимостей. Эти выборы также будут сохранены в~/.vuerc.

поделиться копией проектаpreset(для старых проектовless, люди более склонны кstylus、scss)

{
  "useTaobaoRegistry": false,
  "presets": {
     "bolin": {
      "useConfigFiles": false,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true,
      "cssPreprocessor": "less"
    }
  }
}

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

vue create --help

Миграция проекта

Миграция пакета Package.json

После создания проекта сначалаpackage.jsonпакет для миграции,scriptЗаказ не торопится.

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

Статическая папка перенесена в папку puclic, папка src заменена

старый проект`static`Перенести все в`public`папка,`index.html`переехал в`public`

существуетvue-cli3,publicПапки нетwebpackОбрабатывается и размещается в корневом каталоге веб-сайта

Пример сценария использования общей папки на официальном сайте:

Вам нужно указать имя файла в выводе сборки.

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

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

Посмотрите на мой проектpublicзаявление

скопировать старый проект`src`папку, замените новый проект`src`

Сначала замените его здесь, игнорируйте его на данный момент

Следующий,`npm run serve`Давайте начнем проект

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

Failed to mount component: template or render function not defined.

[Vue warn]: Failed to mount component: template or render function not defined.

Анализ причин:

По умолчанию vue вводится как версия среды выполнения?
требуют компоненты импорта не имеют .default

решить:

создание корневого каталогаvue.config.js

vue.config.jsПожалуйста, смотрите введениеДокументацияШтрих-код слово устал ах

module.exports = {
  configureWebpack: config => {
    config.resolve.extensions = ['.js', '.vue', '.json']
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
   }
}

requireдобавить компонент.default

УведомлениеrequireВнедрить по требованиюvueКогда компонент добавлен, добавьте его после.default.

пример:require('button.vue').default

Причина: изначальноwebpackв упаковкеexport defaultРезультаты экспорта содержимого:

{
  default: {
    // 内容
  }
}

webpack3+Результат упакованного содержимого:

{
  // 内容
}

Autoprefixer applies control comment to whole block, not to next rules.

/* autoprefixer：off */
...
/* autoprefixer：on */

修改为
/* autoprefixer：ignore next */
...

You should write display: flex by final spec instead of display: box

display: flex
代替
display: box

ошибка eslint

Потому что старый проект не включенeslint, побежалnpm run lint,errorsО1000+, ушло полдня на исправление всех багов.

предоставить копиюeslintнастроить иvscodeпараметрeslintобработки (это на самом деле в моем предыдущемОглядываясь назад на спецификации интерфейса, составленные два года назадописано)

.eslintignore

src/assets
src/lib
src/ngmmdebug.js
dist/
output.js

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/recommended',
    'eslint:recommended',
    'standard'
  ],
  rules: {
    'camelcase': [0, {
      'properties': 'always'
    }],
    'no-console': 'off',
    'no-debugger': 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

Настройки Vscode ESLINT

	"eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]

Кодить утомительно, но не стесняйтесь печатать код

Печатать так утомительно, отпустите себя

Печатать так утомительно, сегодня суббота! где мои выходные

Будет больше исправлений ошибок обновления и описаний задач по оптимизации веб-пакетов, продолжение следует~~~