Примечание. Этот метод предназначен для версий ниже Vue-cli 4.0.
-
Установить веб-пакетwebpackОткройте инструмент командной строки, введите
npm install webpack -g, после завершения установки введитеwebpack -vВы можете просмотреть текущую установленную версию, и номер версии показывает, что установка прошла успешно. - **Установите vue-cli глобально:** введите в командной строке
npm install --global vue-cli, после завершения установки введитеvue -VПосмотреть номер текущей версии
3. Используйте Vue-cli для сборки проекта
-
Создайте новую папку Vue, войдите в папку, введите
vue init webpack vue-cli-test, где vue-cli-test — имя файла нового проекта. -
Перейти к параметрам, чтобы заполнить и подтвердить информацию о проекте
-
Имя проекта (значок): ----- Имя проекта, нажмите Enter напрямую, введите имя по умолчанию в скобках (обратите внимание, что имя здесь не может содержать заглавные буквы, если есть ошибка, извините, имя больше не может содержать заглавные буквы ), блог учителя Жуан ИфэнПочему имена файлов строчные?Вы можете ссылаться.
-
Описание проекта (проект Vue.js): ---- Описание проекта, вы также можете нажать «Ввод» напрямую и использовать имя по умолчанию.
-
Автор (): ---- автор, введите mapengfei Затем пользователю предлагается выбрать:
-
Среда выполнения + компилятор: рекомендуется для большинства пользователей Запустить и скомпилировать, так как это было рекомендовано, выберите его Только во время выполнения: примерно на 6 КБ легче min+gzip, но шаблоны (или любой HTML-код, специфичный для Vue) разрешены ТОЛЬКО в файлах .vue — функции рендеринга требуются в других местах.
-
Установить vue-router? (Да/нет) Устанавливать ли vue-router, это официальный маршрут, используемый в большинстве случаев, просто введите «y» и нажмите Enter.
-
Использовать ESLint для анализа кода? (Да/нет) Следует ли использовать ESLint для управления кодом, ESLint — это инструмент управления стилем кода, который используется для унификации стиля кода и обычно используется в проектах. Далее следует вопрос с несколькими вариантами ответов. Выберите предустановку ESLint (используйте клавиши со стрелками). Выберите предустановку ESLint, стиль кода при написании проекта vue и нажмите Enter напрямую.
-
Установка модульных тестов с кармой + моча? (Y / N), будь то для установки тестов подразделения, выберите Установить Y и нажмите Enter
-
npm install
-
- Измените файл конфигурации внутри index.js
-
Изменение номера порта должно предотвратить его занятие. Изменение свойства assetsPublicPath связано с тем, что после упаковки, когда файлы js и css импортируются извне, если путь
'/'В начале соответствующий файл не может быть найден локально, поэтомуЕсли вы хотите открыть упакованный файл локально, необходимо изменить прочность дороги на'/' -
войти
npm run devЗапустите проект, введите адрес доступа после успеха, и отобразится следующий интерфейс.
4. Введение в каталог проекта
Вы можете увидеть записи файла конфигурации для среды разработки и рабочей среды в package.json.
- Вы можете увидеть настройки в dev,build/webpack.dev.conf.js, который является записью конфигурации для веб-пакета в среде разработки.
- появляется в webpack.dev.conf.jswebpack.base.conf.jsЭтот документ представляет собой среду разработки и производственную среду, и даже тестовые среды, общедоступные конфигурации веб-пакетов этих сред. Можно сказать, что этот файл очень важен.
- а такжеconfig/index.js, сборка/utils.js, сборка/build.jsПодождите, смотрите это введение для деталей:сегмент fault.com/ah/119000000…
5. Развертывание пакета
- Файлы проекта, разработанные вами, необходимо поместить в каталог src.
- После разработки проекта используйте
npm run buildЧтобы упаковать проект, он будет сгенерирован после завершения упаковки.distПапка, если путь к файлу был изменен, ее можно открыть непосредственно локально - Когда проект выходит в онлайн, напрямуюdistПапки можно разместить на сервере