前端Wiki/词条/Vue CLI 脚手架

Vue CLI 脚手架

定义Vue 2 时代官方推荐的脚手架与构建工具链，基于 webpack 提供开箱即用的工程化能力

Vue CLI 用 vue create 命令以交互式问答的方式生成项目：选 Vue 版本、要不要 TypeScript、CSS 预处理器、路由与状态管理，回车之后一套带构建、热更新、代码规范检查的工程就跑起来了。它底层封装 webpack 与 babel，并内置插件机制，vue add 命令可随时追加 PWA、单元测试等能力。

在 Vue 3 时代官方已把新建项目的首选让位给基于 Vite 的 create-vue，启动速度与冷构建都快一个量级。但大量仍在维护的 Vue 2 项目仍以 Vue CLI 为底座，理解它的 webpack 配置覆盖、环境变量文件与 vue.config.js 写法依旧是老项目维护者的必备技能。

vue create 交互式初始化，vue add 追加官方插件
通过 vue.config.js 修改 webpack 配置，无需 eject
Vue 3 新项目首选 create-vue，老项目维护才用 Vue CLI

JavaScript

// 初始化：vue create my-app
// 运行：npm run serve / 构建：npm run build

// vue.config.js 常用配置
module.exports = {
  devServer: {
    port: 8080,
    proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => { args[0].title = '我的应用'; return args; });
  }
};

⚠ 常见误区

新建 Vue 3 项目仍用 Vue CLI，官方已改推 create-vue
不知道 devServer.proxy，后端联调时被跨域问题卡住
乱改 webpack 配置导致线上构建行为与本地不一致

🔗 相关词条创建应用与挂载打包部署与优化