Vue2极简教程002-vue-cli搭建的详细过程

Vue2极简教程002：使用vue-cli搭建项目的完整指南

一、环境准备阶段

1. 安装Node.js（必需基础）

• 下载地址：Node.js官网

• 版本选择：

  • Vue2推荐使用 LTS版本（14.x/16.x）
  • 避免使用最新奇数版本（可能有不兼容问题）

2. 验证安装

# 检查Node.js版本
node -v
# 检查npm版本
npm -v

二、vue-cli安装与配置

1. 全局安装脚手架

npm install -g @vue/cli
# 安装指定版本（推荐）
npm install -g @vue/cli@4.5.15

2. 配置国内镜像（加速安装）

# 查看当前源
npm config get registry
# 切换阿里云镜像
npm config set registry https://registry.npmmirror.com/
# 恢复官方源（备用）
npm config set registry https://registry.npmjs.org/

3. 验证安装

vue -V  # 注意大写V
# 应输出类似 @vue/cli 4.5.15

三、创建Vue2项目

1. 初始化项目

vue create my-app

命名规范：

• 禁止使用驼峰式（myApp ❌）
• 推荐使用中划线（my-app ✅）
• 避免包含空格和特殊字符

2. 交互式选项配置

? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint)  # 选择这项
  Manually select features         # 手动选择功能

手动模式推荐配置：

• Babel（ES6转译）
• Router（路由）
• Vuex（状态管理）
• CSS Pre-processors（CSS预处理器）
• Linter / Formatter（代码规范）

3. 项目结构生成

成功后会生成如下核心结构：

my-app/
├── node_modules/  # 依赖包
├── public/        # 静态资源
│   ├── index.html # 入口HTML
├── src/
│   ├── assets/    # 图片等资源
│   ├── components # 组件
│   ├── App.vue    # 根组件
│   └── main.js    # 应用入口
├── package.json   # 项目配置
└── babel.config.js # Babel配置

四、项目启动与配置

1. 启动开发服务器

cd my-app
npm run serve

成功标志：

• 控制台输出 App running at:
• 默认访问地址：http://localhost:8080/

2. package.json脚本详解

"scripts": {
  "serve": "vue-cli-service serve",  // 开发环境
  "build": "vue-cli-service build",  // 生产构建
  "lint": "vue-cli-service lint"     // 代码检查
}

3. 自定义配置

创建vue.config.js进行高级配置：

module.exports = {
  devServer: {
    port: 3000,       // 修改端口
    open: true        // 自动打开浏览器
  },
  lintOnSave: false   // 关闭保存时lint
}

五、常见问题解决

1. 安装卡住

# 清理缓存重试
npm cache clean --force
# 使用yarn替代
npm install -g yarn
yarn global add @vue/cli

2. 版本冲突

# 查看已安装版本
vue list
# 卸载重装
npm uninstall -g @vue/cli
npm install -g @vue/cli@4.5.15

3. 创建项目报错

# 确保目录无中文/空格
# 尝试以管理员身份运行CMD

六、Vue2项目升级建议

1. 添加必要依赖

npm install vue-router@3 vuex@3 --save

2. 推荐VS Code插件

• Vetur（Vue语法支持）
• ESLint（代码规范）
• Prettier（代码格式化）

3. 项目结构优化

src/
├── views/       # 路由页面组件
├── router/      # 路由配置
├── store/       # Vuex状态管理
└── api/         # 接口封装

提示：使用git init初始化仓库，及时提交初始版本：

git add .
git commit -m "init: vue-cli scaffold"

通过以上步骤，你已经获得：

• 符合Vue2官方标准的项目结构
• 现代化的前端开发环境
• 可扩展的工程化配置
• 随时可用的构建系统