1.Vue2 CLI 到底是什么？

不少刚接触Vue的同学，看到“Vue2 CLI”总有点懵：这东西是干啥的？我学Vue2是不是得先搞懂它？尤其是碰到公司里维护老项目，或者自己想快速搭个Vue2小应用的时候，Vue2 CLI的作用就体现出来了，今天咱用问答形式，把Vue2 CLI从基础到实操的关键点聊透,新手也能跟着一步步上手～

先把概念掰碎了说：Vue2 CLI是Vue官方推出的脚手架工具，核心作用是「帮你快速搭建Vue2项目的基础框架」。

举个例子：以前做Vue项目，得自己手动配置Webpack（处理代码打包、压缩）、Babel（转译ES6+语法）、ESLint（代码规范检查）这些工具，还要手动建目录、写入口文件…折腾大半天才能开始写业务，但有了Vue2 CLI，一行命令就能生成包含这些配置和目录的项目模板，直接跳过“重复配环境”的痛苦环节,把精力放在业务开发上。

另外得注意：Vue CLI分版本，Vue2 CLI对应的是x版本（后来Vue CLI3/4/5属于新一代，架构和配置方式不一样），现在很多公司遗留项目还在用Vue2 + Vue2 CLI,所以学它对接手老项目很重要～

怎么安装 Vue2 CLI？

安装前得先确保电脑装了Node.js（建议8.9版本以上），因为npm/yarn是Node自带的包管理工具，Vue2 CLI得靠它们装。

安装分两种情况：

① 如果你电脑没装过Vue CLI，直接装2.x版本：打开命令行（终端），输入 npm install -g @vue/cli-init ，这一步是装“vue init”这个命令的工具，因为Vue2 CLI创建项目靠的是 vue init webpack 项目名 这种方式～

② 如果你之前装了Vue CLI3+（比如用 npm install -g @vue/cli 装的），想同时用Vue2 CLI，得额外装：输入 npm install -g @vue/cli@2 ，这样就能在保留高版本CLI的同时，用Vue2 CLI的功能啦～

装完后，输入 vue -V （V是大写），如果能看到类似 x.x 的版本号,就说明装对啦～

用 Vue2 CLI 创建第一个项目有哪些步骤？

这步特简单,跟着命令走就行：

① 打开命令行，选个想放项目的文件夹（比如桌面新建个“vue2-demo”文件夹，cd进去）。

② 输入 vue init webpack 你的项目名 （vue init webpack my-vue2-app ）,回车后会出现一系列交互选项：

• Project name：项目名（默认是你输入的,回车就行）
• Project description：项目描述（随便写或直接回车跳过）
• Author：作者名（填自己名字或回车）
• Vue build：选构建方式，新手选 runtime + compiler （也就是默认的第一个选项,回车）
• Install vue-router？：是否装路由？选Y（项目基本都需要路由）
• Use ESLint to lint your code？：是否用ESLint检查代码规范？看需求，新手想练规范可以选Y，之后选规范（比如Standard）
• Set up unit tests？：是否装单元测试？新手暂时选N，后期再学
• Setup e2e tests with Nightwatch？：端到端测试？同样新手选N

③ 等交互选项填完，CLI会自动生成项目文件，生成后，进入项目目录： cd 你的项目名 ，然后装依赖： npm install （或用yarn）。

④ 依赖装完，启动开发服务器： npm run dev ，等命令行显示“Compiled successfully”，打开浏览器访问 http://localhost:8080 ,就能看到Vue的默认欢迎页面啦～

项目创建后，目录结构里每个文件夹是干啥的？

刚生成的项目里，一堆文件夹可能看得晕,挑几个核心的讲：

① src 文件夹：写业务代码的核心目录！里面通常有：

• main.js：项目入口文件，负责创建Vue实例、挂载根组件、引入全局配置（比如路由、UI库）。
• components：放通用组件（比如按钮、弹窗）。
• router：如果装了vue-router，这里放路由配置文件（index.js）。
• views：如果是大型项目，放页面级组件（和components的区别是，views对应路由跳转的页面）。

② config 文件夹：项目配置，比如dev.env.js（开发环境变量）、prod.env.js（生产环境变量）、index.js（配置开发/生产的入口、端口、静态资源路径等）。

③ build 文件夹：Webpack配置的核心目录！里面的webpack.base.conf.js（基础配置）、webpack.dev.conf.js（开发环境配置）、webpack.prod.conf.js（生产环境配置），想自定义打包规则（比如加别名、改loader）就得动这里。

④ static 文件夹：静态资源（比如图片、字体），打包时会原封不动复制到dist文件夹里，注意和assets文件夹的区别：assets里的资源会被Webpack处理（比如图片压缩）,static里的不会～

⑤ index.html：项目的入口HTML，Vue挂载的根节点（<div id="app"></div>）就在这里。

其他像node_modules（依赖包）、dist（打包后的生产文件，npm run build后生成）这些，了解作用就行,不用频繁动～

开发中常用的命令有哪些？

记住这几个高频命令,开发效率翻倍：

① npm run dev：启动开发服务器，代码改动后自动热更新,浏览器实时刷新。

② npm run build：打包生产环境代码，会把src里的代码压缩、优化，输出到dist文件夹,部署到服务器就用这个文件夹里的文件。

③ npm run lint：代码规范检查（如果装了ESLint），能自动找出代码里不符合规范的地方（比如多余空格、变量未使用），还能配合 npm run lint -- --fix 自动修复部分问题。

④ npm run unit/npm run e2e：跑测试用例（如果装了单元测试/端到端测试），新手前期用得少,后期维护项目时会用到。

要是装依赖时遇到版本冲突，试试 npm install --legacy-peer-deps （解决Vue2和某些新库的依赖冲突问题）,亲测好用～

想自定义配置，Vue2 CLI 怎么改Webpack？

Vue2 CLI基于Webpack，所以改配置得动build和config文件夹里的文件,举几个常见需求：

① 改开发服务器端口：打开config/index.js，找到dev.port，把默认的8080改成你想要的（比如3000），保存后重启npm run dev就生效。

② 给路径加别名：比如想把src/components写成@components，打开build/webpack.base.conf.js，在resolve.alias里加：'@components': path.resolve(__dirname, '../src/components') ，这样写代码时 import 组件就更方便啦～

③ 添加新的Loader：比如要处理Markdown文件，得装对应的loader（如markdown-loader），然后在webpack.base.conf.js的module.rules里加规则,指定哪些文件用这个loader处理。

改配置时注意：别把原有的关键配置删了，改之前最好备份,不然容易打包报错～

项目里要加UI库或插件，怎么整合？

以常用的Element UI和Axios为例,步骤很通用：

① 整合Element UI（UI组件库）：

1. 装依赖：npm install element-ui --save 。
2. 在src/main.js里引入并注册：

   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   Vue.use(ElementUI)
       

   这样所有组件就能全局使用啦，比如在任意组件里写 <el-button>按钮</el-button> 。

② 整合Axios（HTTP请求库）：

1. 装依赖：npm install axios --save 。
2. 在src里新建utils/request.js，配置Axios（比如设置基础路径、请求拦截器）：

   import axios from 'axios'
   const service = axios.create({
     baseURL: process.env.BASE_API, // 从环境变量拿基础路径，config/dev.env.js里配
     timeout: 5000
   })
   // 请求拦截器：加token、改请求头
   service.interceptors.request.use(...)
   // 响应拦截器：处理错误、解包数据
   service.interceptors.response.use(...)
   export default service
       

3. 在组件里用：import request from '@/utils/request' ，request.get('/api/data') 发请求～

其他插件（比如Vuex、Vue-i18n）也是类似逻辑：装依赖 → 入口文件引入 → Vue.use() 注册～

Vue2 CLI 和 Vue CLI3/4 有啥区别？还需要学Vue2 CLI吗？

先看核心区别：

① 架构不同：Vue2 CLI基于「webpack template」，项目里直接能看到build、config等Webpack配置文件夹；Vue CLI3+基于「插件系统」，把Webpack配置封装起来，项目里默认看不到配置文件，要改配置得新建vue.config.js。

② 配置方式不同：Vue2 CLI改配置得手动改build/config里的文件；Vue CLI3+通过vue.config.js的配置项来改,更简洁。

③ 默认功能不同：Vue CLI3+默认集成了Babel、ESLint、PostCSS等，还支持UI界面（vue ui）可视化配置；Vue2 CLI得自己选是否装这些。

至于是否要学Vue2 CLI？看场景：

如果是接手老项目（很多公司Vue2项目还用CLI2），必须学，不然连项目怎么启动、怎么改配置都摸不着北；如果是做全新项目，优先学Vue3 + Vue CLI5（或Vite），但学Vue2 CLI的思路（脚手架工作流、Webpack基础）对理解前端工程化也有帮助～

总结下：Vue2 CLI是Vue2时代的“项目脚手架神器”，从安装到创建项目，再到改配置、整合插件，每一步都对应实际开发需求，新手把这些基础流程吃透，不管是自己练手做小项目，还是进公司接老项目，都能快速上手～要是过程中遇到报错（比如端口被占用、依赖冲突），别慌，搜报错信息+“Vue2 CLI”,大概率能找到解决方案～