vue-cli 命令 #

简介 #

vue-cli 是 Vue.js 官方提供的命令行工具，用于快速创建 Vue.js 项目的基础结构。它提供了丰富的命令和选项，可以帮助开发者高效地搭建、开发和构建 Vue 应用。

安装 #

全局安装 #

bash

npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli

查看版本 #

bash

vue --version
# 或
vue -V

核心命令 #

创建项目 #

使用 create 命令创建一个新的 Vue 项目：

bash

vue create <project-name>

选项 #

-p, --preset <presetName>: 使用预设配置
-d, --default: 使用默认配置，跳过交互式选择
-i, --inlinePreset <json>: 使用内联 JSON 字符串作为预设
-m, --packageManager <command>: 指定包管理器 (npm/yarn/pnpm)
-r, --registry <url>: 使用指定的 npm registry
-g, --git [message]: 初始化 git 仓库并提交 (默认不提交)
-n, --no-git: 不初始化 git 仓库
-f, --force: 覆盖已存在的目录
--merge: 合并到已存在的目录
--clone: 使用 git clone 获取预设
--skipGetStarted: 跳过 “Get Started” 指南

示例 #

使用默认配置创建项目：

bash

vue create my-project --default

使用 git 初始化项目：

bash

vue create my-project --git "Initial commit"

启动开发服务器 #

在项目目录中使用 serve 命令启动开发服务器：

bash

vue serve <file>

选项 #

-o, --open: 自动打开浏览器
-c, --copy: 复制 URL 到剪贴板
-p, --port <port>: 指定端口号
-H, --host <host>: 指定主机名
-d, --https: 使用 HTTPS

示例 #

启动单个 Vue 文件：

bash

vue serve App.vue

指定端口和主机：

bash

vue serve --port 8081 --host 0.0.0.0

构建项目 #

在项目目录中使用 build 命令构建生产版本：

bash

vue build <file>

选项 #

-t, --target <target>: 构建目标 (app/lib/wc/wc-async)
-n, --name <name>: 库或组件的名称
-d, --dest <dir>: 输出目录 (默认: dist)
--no-clean: 不清理输出目录
--report: 生成构建报告
--report-json: 生成构建报告 (JSON 格式)

示例 #

构建单个 Vue 文件：

bash

vue build App.vue

构建库：

bash

vue build --target lib --name myLib src/index.js

查看插件列表 #

使用 ui 命令打开可视化界面，查看可用的插件：

bash

vue ui

添加插件 #

使用 add 命令向已创建的项目添加插件：

bash

vue add <plugin-name>

示例 #

添加 Vue Router：

bash

vue add router

添加 Vuex：

bash

vue add vuex

检查更新 #

使用 upgrade 命令检查并更新项目依赖：

bash

vue upgrade [plugin-name]

选项 #

-t, --to <version>: 升级到指定版本
-f, --from <version>: 从指定版本升级
--next: 升级到下一个主要版本

配置管理 #

使用 config 命令管理全局配置：

bash

vue config [key] [value]

示例 #

查看当前配置：

bash

vue config

设置包管理器：

bash

vue config -g packageManager yarn

高级命令 #

预设管理 #

使用 preset 命令管理预设：

bash

vue preset [presetName]

示例 #

列出所有预设：

bash

vue preset

保存当前项目配置为预设：

bash

vue preset save my-preset

插件开发 #

使用 init 命令从模板初始化项目：

bash

vue init <template-name> <project-name>

示例 #

使用 Webpack 模板创建项目：

bash

vue init webpack my-project

常用工作流 #

完整开发流程 #

创建项目：
bash
```
vue create my-vue-app
```
进入项目目录：
bash
```
cd my-vue-app
```
安装依赖：
bash
```
npm install
```
启动开发服务器：
bash
```
npm run serve
```
构建生产版本：
bash
```
npm run build
```
部署到生产环境

配置文件 #

项目创建后，会生成以下主要配置文件：

vue.config.js: Vue CLI 项目的核心配置文件
.eslintrc.js: ESLint 配置
.babel.config.js: Babel 配置
package.json: 项目依赖和脚本

vue.config.js 示例 #

javascript

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  
  // 输出目录
  outputDir: 'dist',
  
  // 静态资源目录
  assetsDir: 'assets',
  
  // 文件名哈希
  filenameHashing: true,
  
  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  lintOnSave: process.env.NODE_ENV !== 'production',
  
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  
  // 配置 webpack-dev-server
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  
  // 配置 webpack
  configureWebpack: {
    plugins: [
      // 自定义插件
    ]
  },
  
  // 链式操作 webpack
  chainWebpack: config => {
    // 配置别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('components', resolve('src/components'))
  }
}

常见问题 #

如何升级 vue-cli？ #

bash

npm update -g @vue/cli
# 或使用 yarn
yarn global upgrade --latest @vue/cli

如何查看帮助信息？ #

bash

vue --help
# 查看特定命令的帮助
vue create --help

如何解决依赖冲突？ #

bash

# 清除 node_modules
rm -rf node_modules
# 清除 package-lock.json
rm package-lock.json
# 重新安装依赖
npm install

总结 #

vue-cli 提供了一套完整的命令行工具，帮助开发者快速创建、开发和构建 Vue.js 项目。通过本文档，您可以了解到 vue-cli 的核心命令、选项配置和高级用法，从而更加高效地使用这个工具。

如果您需要更多详细信息，请参考 Vue CLI 官方文档。