Vue初始化脚手架

一、前言

随着前端工程化的不断演进,手动创建 Vue 项目的方式已经逐渐被现代化的脚手架工具所取代。Vue 官方提供的 Vue CLI(Command Line Interface) 是目前最主流的 Vue 项目初始化工具,它可以帮助我们快速生成标准化的 Vue 项目结构,集成 Webpack、Babel、ESLint 等现代开发工具,极大地提升开发效率与项目质量。

本文将带你一步步完成:

  • Vue CLI 的安装
  • 使用 Vue CLI 初始化项目
  • 配置项目功能(如 Babel、TypeScript、路由等)
  • 启动开发服务器与构建生产环境代码
  • 常见问题与注意事项

二、什么是 Vue CLI?

Vue CLI 是一个基于 Node.js 的命令行工具,用于快速搭建 Vue 项目。它内置了现代前端开发所需的大多数配置项,支持插件化扩展,开箱即用。

📌 Vue CLI 的核心特点:

  • 自动化项目结构生成
  • 支持模块热更新(HMR)
  • 内置 Webpack 构建系统
  • 支持 TypeScript、JSX、CSS 预处理器等
  • 提供图形化界面管理项目(Vue UI)

三、准备工作:安装 Node.js 与 npm

在使用 Vue CLI 前,需要先确保你的电脑上已安装 Node.js 和其自带的包管理器 npm

✅ 安装步骤:

  1. 访问 https://nodejs.org/ 下载并安装 LTS 版本。
  2. 安装完成后,在终端执行以下命令验证是否安装成功:
bash 复制代码
node -v
npm -v

如果输出版本号,则说明安装成功。

四、安装 Vue CLI 工具

安装 Vue CLI 非常简单,只需一条命令即可全局安装:

bash 复制代码
npm install -g @vue/cli

安装完成后,验证是否安装成功:

bash 复制代码
vue --version

正常输出类似 5.x.x 的版本号即表示安装成功。

五、使用 Vue CLI 初始化项目

步骤 1:创建新项目

bash 复制代码
vue create my-vue-app

这里 my-vue-app 是你的项目名称,你可以根据需要修改。

步骤 2:选择预设或手动配置

运行上述命令后,CLI 会进入交互式配置界面:

复制代码
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default (Vue 2) babel, eslint
❯ Manually select features

选择 Manually select features 进入自定义配置模式:

  • Babel(ES6+ 转 ES5)
  • TypeScript(支持 TypeScript)
  • Router(Vue Router)
  • Vuex(状态管理)
  • CSS Pre-processors(CSS 预处理器,如 Sass、Less)
  • Linter / Formatter(代码检查工具)
  • Unit Testing(单元测试)
  • E2E Testing(端到端测试)

按空格选中所需功能,回车确认。

步骤 3:选择 Vue 版本(可选)

如果你选择了 TypeScript 或其他依赖项,CLI 可能会让你选择 Vue 版本(2 或 3)。

步骤 4:等待依赖安装

CLI 会自动下载并安装所有依赖包,时间视网络情况而定。

六、启动开发服务器

进入项目目录并启动本地开发服务器:

bash 复制代码
cd my-vue-app
npm run serve

默认访问地址为:

复制代码
http://localhost:8080

你会看到 Vue 的欢迎页面,说明项目初始化成功!

七、项目结构概览

初始化后的项目结构如下:

复制代码
my-vue-app/
├── node_modules/      # 第三方依赖包
├── public/              # 静态资源(不经过 webpack 处理)
├── src/
│   ├── assets/          # 图片等静态资源(经过 webpack 处理)
│   ├── components/      # 组件文件
│   ├── App.vue          # 根组件
│   └── main.js          # 项目入口文件
├── .gitignore           # Git 忽略文件配置
├── babel.config.js      # Babel 配置
├── package.json         # 项目配置信息
└── README.md            # 项目说明文档

八、构建生产环境代码

当你准备部署项目时,可以运行以下命令进行打包:

bash 复制代码
npm run build

构建完成后,会在 dist/ 目录下生成优化后的静态资源,可以直接部署到服务器上。

九、常见问题与解决方案

问题 解决方案
安装失败或超时 更换 npm 镜像源,例如使用淘宝镜像:npm config set registry https://registry.npmmirror.com
创建项目卡住 尝试使用 --default 参数快速创建默认项目:vue create my-app --default
报错:command not found vue 检查 npm 是否全局安装路径加入环境变量 PATH
启动失败 清除缓存并重新安装依赖:rm -rf node_modules && npm install

十、Vue UI:图形化管理项目

Vue CLI 提供了一个可视化的界面来管理项目:

bash 复制代码
vue ui

打开浏览器访问:

复制代码
http://localhost:8000

你可以通过这个界面:

  • 查看项目依赖
  • 修改配置
  • 查看构建日志
  • 管理插件

非常适合新手或者团队协作使用。

十一、结语

感谢您的阅读!如果你有任何疑问或想要分享的经验,请在评论区留言交流!

相关推荐
东风西巷30 分钟前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军37 分钟前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离44 分钟前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw1 小时前
鸿蒙工程版本与设备版本不匹配
前端
gnip1 小时前
http缓存
前端·javascript
我不只是切图仔2 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
JohnYan2 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
该用户已不存在2 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api2 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
陈陈爱java3 小时前
Spring八股文
开发语言·javascript·数据库