Vue cli 3.0 быстро создает проект

Vue.js

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

Сначала нужно установить последнюю версию node.js и npm, проверить версию

Запуск из командной строки: установить обновление (-g означает глобальную установку):

npm install -g node

npm install -g npm

npm автоматически обновит нас до последней версии

Метод использования зеркала Taobao npm

npm config set registry https://registry.npm.taobao.org
cnpm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功 ：
npm config get registry

Установите vue-cli глобально, используя npm:

npm i -g @vue/cli

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

1- Выполнить:

vue create 项目名

2- Здесь есть два варианта:

default (babel, eslint)Пакет по умолчанию, обеспечивающийbabelа такжеeslintслужба поддержки

Manually select featuresВыберите нужные функции и предоставьте дополнительные возможности.

vue-cliВстроенная функция поддерживает 8 функциональных функций, которые можно выбрать несколькими способами: используйте клавиши со стрелками для переключения между параметрами функций, используйте пробел для выбора текущей функции, используйте клавишу a для переключения, чтобы выбрать все, и используйте клавишу i. ключ, чтобы перевернуть параметры.

Ниже приведено краткое описание каждой функции:

babelс эс6 по ес5.

TypeScriptПоддерживает написание исходного кода с использованием TypeScript.

Progressive Web App (PWA) Support PWAслужба поддержки.

RouterПоддержка vue-маршрутизатора.

VuexПоддержите векс.

CSS Pre-processorsПоддержка препроцессоров CSS.

Linter / FormatterПоддержка проверки и форматирования стиля кода.

Unit TestingМодульное тестирование поддерживается.

E2E TestingПоддерживается тестирование E2E.

3-Выберите, чтобы закончить Нажмите и удерживайте клавишу ввода, чтобы перейти к следующему шагу, после чего следует более подробный выбор каждого из предыдущих вариантов.

cssвыберите ваши предпочтения

выберитеESLintСпецификация кода, используйте здесьStandardспецификация кода

Выберите, когда выполнять обнаружение кода, здесь выберите, чтобы выполнять обнаружение при сохраненииLint on save

Выберите решение для модульного тестирования здесьJest

Linter / Formatterвыбери красивее

Этот шаг заключается в выборе местоположения файла конфигурации. дляBabel 、 PostCSSИ т. Д. Могут иметь свои собственные файлы конфигурации :.babelrc 、 .postcssrcИ так далее, вы также можете поместить информацию о конфигурации вpackage.jsonв. Вот для редактора(Visual Studio Code) дружелюбная поддержка (редактор будет искать файл конфигурации в корневом каталоге проекта по умолчанию), выберите размещение файла конфигурации снаружи, выберитеIn dedicated config files

4- Дополнение

Save this as a preset for future projects?Это делается для того, чтобы спросить, хотите ли вы сохранить текущую серию конфигураций параметров, чтобы вы могли повторно использовать их в следующий раз при создании проекта.

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

После инициализации переходим в корневой каталог проекта:

cd 项目名

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

npm run serve

конфигурация vue.config.js

Ссылки на этот разделСправочник по конфигурации Vue-cli

vue.config.jsявляется необязательным файлом конфигурации, если проект (иpackage.jsonЕсли этот файл существует в корневом каталоге того же уровня, он будет@vue/cliАвтозагрузка. вы также можете использоватьpackage.jsonВ поле vue, но обратите внимание, что это написание требует от вас строго следовать формату JSON.

Этот файл должен экспортировать объект, содержащий параметры

// vue.config.js
module.exports = {
  // 选项...
}

Настроить прокси

Если ваше внешнее приложение и внутренний сервер API не работают на одном хосте, вам необходимо проксировать запросы API на сервер API в среде разработки. Эта проблема может быть решена путемvue.config.jsсерединаdevServer.proxyпараметры для настройки

Конфигурация прокси для vue-cli3.0

devServer: {
    // webpack-dev-server 相关配置
    port: 8085, // 端口号
    host: "localhost",
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    hotOnly: false,
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    proxy: {
      "/ganziecommerce": {
        target: "http://192.168.0.110:8001",
        ws: true,
        changeOrigin: true
      }
    }
  },

Пакет

publicPath: "./",// базовый путь

outputDir: "dist",// каталог выходного файла, можно настроить

assetsDir: "assets",//Каталог статических ресурсов (js, css, img, шрифты)

npm run build//Пакет

Категории