从 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

    bash 复制代码
    npm install -g @vue/cli
  2. 创建新项目

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

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

  3. 进入项目目录

    bash 复制代码
    cd my-vue-app
  4. 运行开发服务器

    bash 复制代码
    npm run serve
  5. 访问应用 打开浏览器访问 http://localhost:8080/

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

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

  2. 创建新项目

    bash 复制代码
    npm init vite@latest my-vite-app --template vue
    cd my-vite-app
  3. 安装依赖

    bash 复制代码
    npm install
  4. 修改 package.json 添加自动打开浏览器功能vite.config.js 中添加:

    js 复制代码
    export default {
      server: {
        open: true,
      },
    };
  5. 运行开发服务器

    bash 复制代码
    npm run dev
  6. 查看结果 访问 http://localhost:5173/ 查看你的应用。

四、常见问题及解决方案

  • 重复键错误 :确保 package.json 文件中的每个键都是唯一的,避免出现重复定义的问题。
  • JSON 格式错误:不要在 JSON 文件中添加注释,保证格式正确。
  • 停止服务 :使用快捷键 Ctrl + C(Windows/Linux)或 Cmd + C(macOS)停止正在运行的服务。
相关推荐
我是日安16 分钟前
从零到一打造 Vue3 响应式系统 Day 18 - Reactive:深入 Proxy 的设计思路
前端·vue.js
_AaronWong24 分钟前
多页面应用登录状态共享:基于弹出窗口的通用解决方案
前端·javascript·vue.js
六月的可乐25 分钟前
Vue接入AI聊天助手实战
前端·vue.js·人工智能
南风木兮丶1 小时前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
mldong2 小时前
保姆级教程!手把手教你搭建FastAPI + Vue3前后端分离项目
vue.js·python·全栈
java水泥工2 小时前
学科竞赛管理系统|基于SpringBoot和Vue的学科竞赛管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
千里码aicood2 小时前
python+vue智慧物业管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·后端
乐~~~2 小时前
解决avue-input-tree组件重置数据不回显/重置失败
前端·javascript·vue.js
正义的大古3 小时前
OpenLayers地图交互 -- 章节十三:拖拽旋转交互详解
javascript·vue.js·openlayers
怎么吃不饱捏4 小时前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js