使用vite搭建vue3项目体验

最新推荐文章于 2025-05-12 23:36:48 发布
最新推荐文章于 2025-05-12 23:36:48 发布
阅读量206 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue3 前端 vue 文章标签： vue.js javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/houpeibin2012/article/details/121082570
本文介绍如何使用Vite创建Vue3项目。首先确保Node.js版本大于等于12.0.0，然后通过npm init命令配合@vitejs/app模板来初始化项目，可以选择纯Vue或包含TypeScript的模板。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vite 需要 Node.js 版本 >= 12.0.0

创建vite+vue3项目

方法一：

npm init @vitejs/app my-vue-app --template vue

方法二：
npm init @vitejs/app my-vue-app

然后依次选择：vue->vue-ts 即可
在这里插入图片描述
在这里插入图片描述

【Vue3 + Vite】Vite搭建 项目解构 Vue快速学习 第一期
Orion
01-28 2955
vue3+vite项目搭建，安装启动停止，项目目录解构，组件说明，CSS导入方式，Vue3实现计数器....
使用vite快速搭建vue3项目
weixin_63776631的博客
04-23 1071
vite是一个现代化的前端构建工具，它旨在提供快速的开发体验和优化的构建性能。vite基于ES模块的原生浏览器支持，利用现代浏览器的特性来实现快速的热更新和构建。它支持Vue、React、Svelte等框架，并提供了丰富的插件系统和开箱即用的特性，使开发者能够更高效地构建现代化的Web应用程序。（当然在在vite的官方文档中你可以看到更具体的介绍）
vue3 + vite
WJLSH123的博客
04-26 7931
端口控制 + 跨域 在vite.config.js文件中 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], base: "./",//打包路径 resolve: { alias: {
【Vue3】（一）使用vite创建Vue3工程、Vue3基本语法讲解
最新发布
io_123io_123的博客
05-12 1796
在 Vue3 中，Vite 提供了一种更简洁的开发方式，支持 setup 语法糖和响应式数据管理。通过 ref 和 reactive，开发者可以轻松定义响应式数据，ref 适用于基本数据类型，而 reactive 则用于复杂数据类型。Vue3 还提供了 computed 和 watch 等特性，帮助开发者更好地管理数据和状态。此外，Vite 支持通过 defineExpose 在父子组件间共享数据和方法，进一步提升开发灵活性。
Vue3——Vite篇
警警的博客
09-24 4431
Vite是一款由Vue.js的作者尤雨溪开发的前端构建工具，专为现代前端项目而设计。它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。以下是对Vite的详细解析：Vite的配置文件是Vite项目中的核心配置文件，通过该文件可以对项目的开发服务器、插件系统、打包配置等进行自定义。常见的配置项包括：Vite非常适合用于现代前端项目的开发，特别是在需要快速启动、热更新和良好开发体验的场景下。例如，在开发Vue、React等单页面应用（SPA）时，Vite能够显著提升开发效率，降低开发成本。Vite作为一款现
Vite创建Vue3项目
weixin_50117915的博客
01-16 9528
Vite创建Vue3项目
手把手教你用Vite构建第一个Vue3项目
再小的帆也能远航，把分享变成一种习惯
09-04 1万+
今天就来说说怎么创建第一个Vue3项目。并安装Element Plus 及一些常用配置，最终实现一个简单增删改查页面
vite搭建vue3项目
09-06
在本文中，我们将深入探讨如何使用Vite搭建Vue 3项目。Vite是由Vue.js的作者尤雨溪创建的一个现代化的前端构建工具，它利用了浏览器原生的ES模块导入功能，提供了更快的开发环境启动速度和热更新体验。与传统的...
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
记录一次基于Vite搭建Vue3项目的过程
胖蔡叨叨叨
06-16 550
Vue2已经于停止维护了，2024年算是vue3的崭新的一年，我们的项目也基本从vue2逐渐向着Vue3过渡，Vue3相较于vue2有更好的开发体验，和ts的自然融合使得项目的结构、功能拆分变得更加的清晰；组合式声明有种MVC向着MVP、MVVM转变的错觉；而Vite的使用使得我们的编译速度产生质的飞跃。总体来说，Vue3是一个不错的选择，今天这边文章主要就是来记录一下如何创建一个Vue3的项目。
使用Vite创建vue3项目
晨曦博客
01-28 592
Vite是一个现代化的前端构建工具，专为快速开发现代Web应用而设计。它与传统的构建工具不同，采用了一种全新的开发模式，旨在提供更快的冷启动、热模块替换和按需编译的能力。Vite的主要特点包括：快速的冷启动：Vite利用ES模块的特性，在开发环境下将每个模块作为单独的文件处理，而不是将它们打包到一个文件中。这样，在启动项目时，Vite只需要进行少量的初始化工作，大大缩短了冷启动时间。真正的按需编译：Vite只会编译当前正在开发的文件，而不是整个项目，这种按需编译的方式极大地提高了开发过程中的编译速度。
VUE3+vite
weixin_41184962的博客
03-24 4251
vue3 新特性 + vite 防抖和节流 Vue 没有内置支持防抖和节流，但可以使用Lodash等库来实现。 如果某个组件仅使用一次，可以在methods中直接应用防抖： <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js">&...
vite-vue3
Raywh的博客
06-06 2557
vite + vue3 使用文档(单页应用-超简单教程)，简化使用，但是更多的还是阅读文档
vue3和vite
qq_34200636的博客
12-30 2732
新建vue3项目，并使用vite
Vite 创建 Vue3 项目(完整)
热门推荐
m0_54158068的博客
02-25 2万+
Vite 创建 Vue3 项目(完整)
使用vite搭建vue3
weixin_45979310的博客
08-22 3430
vite3+vue3+router+pinia+axios+echart+BMapGL+自定义指定封装
vite +vue3+ts+ele+ 搭建项目
attach_uzi的博客
10-31 164
vite+vue3+ts+element-plus项目搭建--超详细_一个超爱喝可乐的web前端攻城狮-优快云博客
使用vite 搭建vue 3的项目
weixin_52984349的博客
11-30 4134
使用vite 搭建vue 3的项目
使用vite搭建vue3项目vue-router
12-26
Vite是一个快速的前端构建工具，特别适合用于Vue3项目的开发。它通过预加载、树状模块化和SSR（服务器端渲染）等特性，提供高效的开发体验。Vue Router 是 Vue.js 的官方路由库，用于处理URL到组件的映射。 以下是使用Vite搭建Vue3项目并集成Vue Router的基本步骤： 1. **安装依赖**: - 初始化一个新的Vue3项目：`npm create vue@next` - 安装Vite和Vue Router：`npm install vite @vue/cli-plugin-vite router-view-component` 2. **配置Vite**: - 更新 `vite.config.js` 文件，引入Vue Router插件，并设置基本配置： ```js import { defineConfig } from &#39;vite&#39;; import vue from &#39;@vitejs/plugin-vue&#39;; import { createRouter, createWebHistory } from &#39;vue-router&#39;; export default defineConfig({ plugins: [vue(), ...], server: { port: 3000, }, build: { target: &#39;esnext&#39;, }, // 添加路由配置 resolve: { alias: { &#39;@&#39;: path.resolve(__dirname, &#39;./src&#39;), &#39;vue-router&#39;: &#39;vue-router&#39; } }, // 配置Vue Router optimizeDeps: { include: [&#39;vue-router&#39;] }, }); ``` 3. **创建路由**: - 创建`src/router`文件夹，并在其中创建`index.ts`。初始化一个简单的路由实例： ```ts import { createRouter, createWebHashHistory } from &#39;vue-router&#39;; import Home from &#39;@/views/Home.vue&#39;; // 导入你的视图组件 const routes = [ { path: &#39;/&#39;, component: Home }, // 添加更多路由... ]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router; ``` 4. **在组件中使用router-view**: - 在需要展示路由内容的地方导入`router-view`组件： ```html <template> <div id="app"> <router-view></router-view> </div> </template> ``` 5. **导航守卫** (可选)： - 如果需要权限控制或其他自定义功能，可以设置导航守卫，如`beforeEach`和`asyncData`。 完成以上步骤后，运行 `npm run serve`，你应该能在浏览器中看到基于Vue Router管理的页面切换了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值