初始化一个基于Vite的Vue3 Demo

最新推荐文章于 2025-09-15 14:40:57 发布
原创 最新推荐文章于 2025-09-15 14:40:57 发布 · 244 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍了如何使用HBuilderX初始化一个基于Vite的Vue3项目，该Demo包含路由功能，旨在供学习和了解。通过执行命令创建项目，完成后自动启动，在外部浏览器中查看效果，项目结构包括components组件包和router路由配置。

初始化一个基于Vite的Vue3 Demo

初始化一个基于Vite的Vue3 Demo

目的：建立一个带路由的Vue3 Demo 用于学习了解

工具不限 我这里使用的是HBuilderX

1.进入后打开终端（在左下角）
2.进入官网
进不去的看下图 .执行如下命令
执行如下命令
创建完毕后自动启动 点击链接右键在外部浏览器显示即可（内部浏览器会出现显示不出问题）

结构如下：
在这里插入图片描述
简单介绍：components 为组件包
router ：路由所在包
建议从此开始一点点看 很简单

专心哦
关注
vue3-demo:vue3-演示
04-01
vue3-演示 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
一个VUE3的页面demo
weixin_47194802的博客
04-26 1875
样子是这样的目录是这样的。
vue3 基本教程-运行一个最小demo
最新发布
jixn的博客
09-15 1万+
响应式状态管理（使用 ref）事件处理组件创建和使用prop 传递Vue 3 的 Composition API 和 script setup 语法使代码更简洁、更易于组织和重用。
vite_vue3_demo:vite + vue3 + tsx（试验性框架）
03-27
vue3 + vite2 +元素加 比较超前的试验性框架，基于新一代脚手架建造... 目前vue3生态还在逐步建立中... vue2.x项目不建议直接升级vue3。 入门指南 npm run dev npm运行构建 npm运行报告 风格指南 TS（JS）+模板+ vue-class-component（option-api）（传统官方推荐写法，保留模板） TSX +合成API import { defineComponent } from 'vue' ; import { RouterLink , RouterView } from 'vue-router' ; import './style/main.scss' export default defineComponent ( { name : 'App' , setup ( ) { return ( ) => (
Vue3-Demo实例
沿岸踱步
06-28 1136
vue3中常用到的知识点。
demo-vue3：vue3.0演示
03-02
demo-vue3：vue3.0演示
精选资源
Vite-demo：使用vite工具，初始化vue3.x项目
02-13
在本文中，我们将深入探讨如何使用 Vite 初始化并运行一个 Vue 3.x 项目。首先，我们需要确保我们的计算机上已经安装了 Node.js 和 npm 或者 Yarn，因为它们是 Vite 集成开发环境（IDE）的基础。 1. **安装 Vite** ...
精选资源
基于vue3、vite、typescript等最新前端技术实现的demo
01-22
综合上述技术，"基于vue3、vite、typescript等最新前端技术实现的demo"展示了如何使用这些前沿工具来构建高效、安全且易于维护的Web应用。Vue3的Composition API与TypeScript的强类型系统相结合，使得代码结构清晰，...
精选资源
vite2 + vue3构建多页应用-源码demo
10-15
本项目“vite2 + vue3构建多页应用-源码demo”将深入探讨如何使用这两者来搭建一个多页面应用程序。 **Vite2 的特性** 1. **热模块替换（Hot Module Replacement, HMR）**: Vite2 支持开箱即用的HMR，无需额外配置...
精选资源
drag-demo:基于vue3.0 + ts的可视化组件拖拽demo
03-10
在本项目"drag-demo"中，我们探讨了一个基于Vue 3.0和TypeScript的可视化组件拖放（drag-and-drop）实现。这个演示利用了Vite作为构建工具，以及Vant UI库来增强用户界面。以下是对这些技术的详细解释： 1. **Vue ...
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3933
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
vite-vue3-demo
04-16
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。 TS中.vue导入的类型支持 由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码： 如果使用手掌 运行Volar: Switch TS Plug
vue3-vite-demo
03-09
Vue3学习 根据部署
vue3 demo.zip
12-05
vue-bilibili-master 包含了一些vue3 基础例子
vue3-small-mall:vue3商城demo
04-03
vue3-小商场 -记录未解决错误 < router xss=removed> < transition xss=removed xss=removed> < keep xss=removed> < component xss=removed> < / keep-alive > < / transition > < / router-view > 修复 < router xss=removed> < transition xss=removed xss=removed> < div
vue3-demo:vue3演示等
04-01
vue3-演示 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue3完整Demo(数据绑定，数据显示，数据修改，数据提交）
le12345678934694的博客
10-23 588
需要引入的的依赖：jquery（用于异步请求）
vue3项目小demo练习
荔枝吖阿
11-27 5186
vue3 出来了，学和用要结合起来，我就做了个小demo,此中用到了watch,computed,toRefs等新特性。如图： 点击下部的tab导航，对应的顶部内容切换 思路：由于顶部导航的内容是不确定的，所以使用slot插槽，将导航的内容做为一个变量（headerTitle)存在vuex的state中，通过mutations根据路由名的变化来更改state中的headerTitle 核心内容： 1.获取路由 import {useRouter} from 'vue-router' cons
vue3_demo
weixin_30372371的博客
07-27 731
1 <template> 2 <div id="app"> 3 <!--第一部分--> 4 <fieldset> 5 <legend>指令综合小练习</legend> 6 <div> ...
vite-vue-demo：基于Vite与Vue的学习项目
本项目通过结合 Vite 和 Vue，展示了如何快速搭建一个基于 Vue 3 的现代化单页应用（SPA）。Vue 3 引入了 Composition API、更好的 TypeScript 支持、更高效的虚拟 DOM 算法以及更小的运行时体积，这些特性在本项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值