从 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)停止正在运行的服务。
相关推荐
weixin_584121434 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
尚学教辅学习资料4 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|4 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
quan26318 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
qb9 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
虫无涯9 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
NewChapter °9 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)9 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
小高00711 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible12 小时前
终止异步操作
前端·javascript·vue.js