Vue CLI service

Use commands

In a Vue CLI project, @vue a command called vue-cli-service is installed. You can access this command in npm scripts with vue-cli-service, or from the terminal at ./node_modules/.bin/vue-cli-service.

This is the package.json that you use for the default preset project:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

You can call these scripts by npm or Yarn:

npm run serve
# OR
yarn serve

If you can use npx (the latest version of npm should already come with it), you can also call the command directly like this:

npx vue-cli-service serve

Tips

You can run more feature scripts using the GUI with the vue ui command.

Here's a GUI's webpack Analytic:

vue-cli-service serve

用法：vue-cli-service serve [options] [entry]

选项：

  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

The vue-cli-service serve command starts a development server (webpack-dev-server)with out-of-the-box module Hot-Module-Exchange.

In addition to passing command-line parameters, you can also configure the development server .js the devServer field in the vue.config database.

The command-line parameter, entry, is specified as a unique portal, not an additional append entry. An attempt to override the .pages the entry in the "entry" will cause an error.

vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

The vue-cli-service build produces a production-usable package in the dist/directory, with JS/CSS/HTML compression, and an automated vendor chunk splitting for better caching. Its chunk manifest is inline in HTML.

Here are some useful command parameters:

• --modern uses modern mode to build apps, deliver natively supported ES2015 code for modern browsers, and generate a package compatible with older browsers for automatic fallback.
• --target allows you to build any component in your project as a library or Web Components component. For more details, see Build Goals.
• --report and --report-json generate reports based on build statistics, which help you analyze the size of the modules contained in the package.

vue-cli-service inspect

用法：vue-cli-service inspect [options] [...paths]

选项：

  --mode    指定环境模式 (默认值：development)

You can use vue-cli-service inspect to review the webpack config of a Vue CLI project. For more details, please refer to review webpack config.

# View all available commands

Some CLI plug-ins inject additional commands into the vue-cli-service. F or @vue/cli-plugin-eslint injects the vue-cli-service lint command. You can view all injected commands by running the following commands:

npx vue-cli-service help

You can also learn the options available for each command in this way:

npx vue-cli-service help [command]

Cache and parallel processing

• Cache-loader turns on Vue/Babel/TypeScript compilation by default. The file is cached in node_modules/.cache -- if you're having compile problems, remember to delete the cache directory before you try it.
• Thread-loader turns on Babel/TypeScript translation on a multi-core CPU machine.

Git Hook

After installation, @vue/cli-service also installs yorkie, which makes it easy to specify Git hooks in the gitHooks field of package.json:

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
   "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

Attention

yorkie fork from husky and is not compatible with the latter.

Eject is not required for configuration

Projects created with vue create can run without additional configuration. Plug-ins can also be designed to coexist with each other, so in most cases you only need to pick the features you need in the interactive command prompts.

But we also know that meeting every need is unlikely, and the needs of a project are constantly changing. P rojects created with the Vue CLI allow you to configure almost every corner of the tool without the need for eject. For more details, please refer to the Configuration Reference.