从 Vue CLI 到 Vite：逐步指南

一、Vue CLI vs Vite

1. Vue CLI（Vue Command Line Interface）

Vue CLI 是官方提供的一个命令行工具，用于快速搭建 Vue.js 项目。它通过图形化界面或命令行选项，允许开发者轻松配置项目结构、插件和依赖项。Vue CLI 使用 Webpack 作为其默认的打包工具。

2. Vite

Vite 是由 Vue.js 的作者尤雨溪开发的一个新的前端构建工具。与传统的构建工具如 Webpack 不同，Vite 利用了现代浏览器对 ES 模块的支持来提供极速的服务启动时间和即时的模块热更新（HMR）。这使得开发体验更为流畅。

3. 主要区别

• 启动速度：Vite 因为采用了原生 ES 模块进行开发服务器的启动，所以在大型项目中比 Vue CLI 更快。
• 热模块替换（HMR）：Vite 提供了更高效的 HMR 实现，使得在保存文件后几乎可以立即看到更改效果。
• 生态系统：Vue CLI 拥有一个成熟且丰富的插件生态，而 Vite 正在快速发展中，逐渐积累自己的插件库。

二、使用 Vue CLI 创建并运行项目

1. 安装 Vue CLI

   npm install -g @vue/cli

2. 创建新项目

   vue create my-vue-app

   根据提示选择需要的功能和配置。

3. 进入项目目录

   cd my-vue-app

4. 运行开发服务器

   npm run serve

5. 访问应用 打开浏览器访问 http://localhost:8080/。

三、使用 Vite 创建并运行项目

1. 安装 Node.js 和 npm 确保已安装最新版本的 Node.js 和 npm。

2. 创建新项目

   npm init vite@latest my-vite-app --template vue
   cd my-vite-app

3. 安装依赖

   npm install

4. 修改 package.json 添加自动打开浏览器功能 在 vite.config.js 中添加：

   export default {
     server: {
       open: true,
     },
   };

5. 运行开发服务器

   npm run dev

6. 查看结果 访问 http://localhost:5173/ 查看你的应用。

四、常见问题及解决方案

• 重复键错误 ：确保 package.json 文件中的每个键都是唯一的，避免出现重复定义的问题。
• JSON 格式错误：不要在 JSON 文件中添加注释，保证格式正确。
• 停止服务 ：使用快捷键 Ctrl + C（Windows/Linux）或 Cmd + C（macOS）停止正在运行的服务。