Vue CLI快速上手：VueLearnNotes教你搭建现代化Vue开发环境

Vue CLI快速上手：VueLearnNotes教你搭建现代化Vue开发环境

【免费下载链接】VueLearnNotesVue学习笔记项目地址: https://gitcode.com/gh_mirrors/vu/VueLearnNotes

Vue CLI是Vue.js官方提供的完整开发系统，能帮助开发者快速搭建标准化的Vue项目架构。通过VueLearnNotes项目中的16-vue-cli模块，我们将学习如何从零基础开始配置高效的Vue开发环境，掌握脚手架工具的核心功能与最佳实践。

📋 为什么选择Vue CLI？

Vue CLI解决了手动配置项目的痛点，提供三大核心优势：

• 开箱即用：内置webpack优化配置、ESLint代码规范、热重载等开发工具
• 灵活扩展：通过插件系统和配置文件自定义项目需求
• 版本兼容：自动处理Vue 2.x/3.x版本差异，支持TypeScript、PWA等现代特性

项目中16-vue-cli模块详细记录了Vue CLI 2.x和3.x版本的使用方法，包含完整的配置示例和对比分析。

🔧 快速安装步骤

1. 环境准备

确保已安装Node.js（建议v14+）和npm：

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

2. 全局安装Vue CLI

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

验证安装成功：

vue --version # 显示@vue/cli 4.x以上版本

3. 创建第一个Vue项目

# 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/vu/VueLearnNotes cd VueLearnNotes/16-vue-cli # 创建Vue CLI 2.x项目（传统webpack模板） vue init webpack 01-vuecli2test # 或创建Vue CLI 3.x项目（推荐） vue create 04-vuecli3test

📝 项目创建配置详解

创建项目时会出现交互式配置界面，关键选项说明：

Vue CLI 2.x项目创建配置界面，展示了项目名称、作者、构建模式等关键选项

核心配置选项：

• Vue build：选择构建模式
  • runtime+compiler：完整版本，支持template模板
  • runtime-only：轻量版本，性能更优（推荐）
• 安装Vue Router：建议选择Yes，用于页面路由管理
• ESLint配置：选择Standard规范，保持代码风格一致
• 包管理工具：根据习惯选择npm或yarn

📂 项目目录结构解析

Vue CLI 2.x目录结构

Vue CLI 2.x的传统目录结构，包含build和config等配置文件夹

核心目录说明：

• build/：webpack构建配置文件
• config/：项目环境变量配置
• src/：源代码目录（业务开发主要区域）
• static/：静态资源文件夹（会被直接复制）

Vue CLI 3.x目录结构

Vue CLI 3.x的精简目录结构，采用"0配置"理念

主要变化：

• 移除build和config文件夹，配置通过vue.config.js实现
• 新增public/文件夹替代static
• 内置更多默认配置，开箱即可开发

⚡ runtime-compiler vs runtime-only模式

Vue CLI提供两种构建模式，性能差异显著：

Vue模板编译流程图，展示了runtime-compiler与runtime-only的性能差异

两种模式对比：

最佳实践：优先选择runtime-only模式，通过.vue文件的单文件组件开发，由vue-template-compiler在构建时预编译模板。

🛠️ 自定义配置技巧

Vue CLI 3.x配置示例

在项目根目录创建vue.config.js文件：

module.exports = { // 基本路径 publicPath: './', // 输出目录 outputDir: 'dist', // 开发服务器配置 devServer: { port: 8088, open: true }, // 配置别名 chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) } }

常用命令速查

# 启动开发服务器 npm run serve # Vue CLI 3.x npm run dev # Vue CLI 2.x # 构建生产版本 npm run build # 代码检查 npm run lint # 图形化配置界面（Vue CLI 3.x+） vue ui

📚 学习资源推荐

• 官方文档：项目中的16-vue-cli.md提供完整教程
• 示例项目：
  • Vue CLI 2.x示例：01-vuecli2test
  • Vue CLI 3.x示例：04-vuecli3test
• 进阶配置：查看vue.config.js示例

通过Vue CLI和VueLearnNotes提供的学习资源，即使是Vue新手也能快速搭建专业的开发环境。开始你的Vue之旅，体验现代化前端开发的高效与乐趣！

【免费下载链接】VueLearnNotesVue学习笔记项目地址: https://gitcode.com/gh_mirrors/vu/VueLearnNotes