小雷带你从0到1搭建Vue项目（1）
一、引言
Vue 是前端主流框架之一，以轻量级、易上手、高效的响应式系统著称，生态丰富，适合构建交互复杂的 Web 应用。
本文旨在帮助对前端感兴趣的小伙伴们快速地入门vue——这一强大且广泛应用的前端框架。同时我也会列出一些小白入门时的常见错误，让大家少走弯路，提高学习效率！
二、环境准备
1、安装Node.js和npm/yarn
在这里笔者建议大家使用nvm统一安装和管理nodejs，因为在大家后期接触到不同项目时，会由于依赖版本的问题而安装多个不同版本的nodejs，到那时nvm的作用就显现出来了。
下载好nvm后还涉及路径配置和下载源切换，由于篇幅我就不在这里赘述了，具体操作的话读者可以去参考其他文章，或者在评论区留言，改天我再出一篇nvm使用的详细教程。
安装后nodejs后就是选择符合自己情况的包管理器。通常我们选择npm或yarn。npm 是 Node.js 的默认包管理器，安装 Node.js 时会自动附带 npm。而yarn的安装我推荐使用npm，具体命令如下：
npm install -g yarn # 全局安装 yarn
两者的选择视具体而定。
对于新项目：
- 推荐 yarn（v1 或 v2+）：如果追求极致速度和确定性依赖，尤其是在大型项目或 CI/CD 环境中。
- 推荐 npm：如果需要与现有 npm 生态无缝集成，或偏好简单直接的命令
对于现有项目，原来用什么，现在还用什么，避免依赖冲突。
2、安装 Vue CLI 或 Vite
Vue CLI（Command Line Interface）是官方提供的快速搭建 Vue.js 项目的工具。
Vue CLI完全支持 Windows 系统，可以通过 vue ui 命令启动可视化界面，适合不熟悉命令行的用户；创建项目时支持选择预设模板和支持自定义配置。但从笔者的使用体验上来说，Vue CLI搭建项目的速度较慢，体验不佳。
安装Vue CLI的命令如下：
npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli
使用Vue CLI创建项目的命令如下：
vue create my-vue-project
也可以使用图形化界面创建:
vue ui
执行该命令后浏览器自动打开 http://localhost:8000， 用户可以通过可视化界面创建、管理和运行项目。
创建项目后，进入项目目录并启动开发服务器：
cd my-vue-project
npm run serve
# 或
yarn serve
浏览器会访问http://localhost:8080， 并查看初始界面。
Vite（法语意为 "快速"）是 Vue.js 团队开发的新一代构建工具。相比Vue CLI，Vite搭建项目的速度更快，不到一分钟就可搭建完毕，支持自定义项目配置，支持热更新，打包速度更快，体积更小。而且它还支持多框架，如React等。
Vite创建项目的命令如下：
# 1. 创建项目（替换 my-vite-project 为你的项目名）
npm init vite@latest my-vite-project -- --template vue
# 2. 进入项目目录
cd my-vite-project
# 3. 安装依赖
npm install
# 4. 启动开发服务器
npm run dev
Vue CLI和Vite的对比：
| 维度 | Vue CLI | Vite |
|---|---|---|
| 技术架构 | 基于 webpack + rollup 的传统构建 | 基于 ES 模块 + esbuild 的新一代构建 |
| 设计目标 | 提供完整项目脚手架和全流程支持 | 聚焦开发阶段的极速体验 |
| 生态兼容性 | 兼容 webpack 生态（插件、loader） | 兼容 Rollup 生态（更轻量） |
Vue CLI 更适合：
- 大型企业级项目：需要复杂的模块拆分、代码分割和长期维护
- 多页面应用（MPA）：需要处理多个入口和公共资源抽离
- 需要兼容旧技术栈：如集成 jQuery、传统库或复杂后端服务
Vite 更适合：
- 中小型项目：单页应用（SPA）、原型开发、个人项目
- 组件库 / 工具库开发：专注于组件开发和预览，无需完整应用架构
- 现代前端框架项目：Vue 3、React、Svelte 等新框架项目
反正从我自己的使用经验出发，我更推荐Vite，因为Vite启动速度快，而我们一般较少接触到大型项目，也不需要兼容老旧技术栈，所以Vue CLI的稳定性体现得并不明显。
好了，本期文章先分享到这吧，下期文章就让我带大家初步接触一下vue的核心功能搭建吧。如果这篇文章帮助到你的话，还希望多多点赞转发，也期待与各位在评论区的讨论。
