快速入门Vue3——初体验

原创 已于 2025-09-18 10:04:13 修改 · 1k 阅读 · 12 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
Web前端

当前文章被收录于：

Web前端
3 篇文章 0 人学习

前端开发-Vue3.0+

订阅专栏 查看详情
于 2025-08-22 23:39:30 首次发布

目录

前言

一、搭建环境

1.1、安装Node.js

1.2、安装Vite

二、项目创建

三、运行项目

四、集成Pinia

4.1、Pinia介绍

4.2、Pinia安装

五、集成VueUse

5.1、vueuse简介

5.2、vueuse安装

六、集成Vant

6.1、Vant简介

6.2、Vant安装

前言

本专栏主要介绍如何使用Vue3+Vite+TS+Pinia+VueUse+Vant的技术栈来入门前端开发，由于今天是第一篇，咱们来点轻松的内容——搭建开发环境。

Vue3是一款前端开发框架，关于Vue3的学习可以参考文档：Vue3文档

Vite是一种前端构建工具，关于Vite的学习可以参考文档：Vite文档

TypeScript是一种编程语言，它是JavaScript的一个超集，学习TS可以参考：TypeScript文档

一、搭建环境

1.1、安装Node.js

首先，你需要安装node.js，可以直接去官网下载：Node.js，根据自己所需的平台按需下载：

如果你是Mac平台，可以通过HomeBrew这个工具安装，非常方便。安装完了之后，可以通过以下命令查看node和npm的版本：

接着可以通过以下命令切换一下npm默认的源：

// 切换
npm config set registry https://registry.npmmirror.com
// 查看
npm config get registry

1.2、安装Vite

安装Vite可以参考官网的安装说明：https://cn.vitejs.dev/guide/

下面咱们通过手动安装的形式来操作，通过以下命令进行安装：

// 安装
npm install -g vite
npm install create-vite -g
// 查看
npm list -g

二、项目创建

上面的环境搭建好之后，咱们继续来创建一个项目试试水。

首先进入到你想要创建项目的目录下，然后使用npm init vite或者create-vite命令创建项目：

接着会出现一步一步的指令，我们只需要根据指令提示进行相应的操作即可，比如这里会让你输入项目名Project name、Package name，让你选择一个前端框架，让你选择一种开发语言等等，之后工具会自动创建项目直到创建完成：

然后我们进入到刚刚创建完成的项目目录下，使用npm install命令来安装依赖包：

三、运行项目

运行项目也很简单，这里咱们通过执行npm run dev这个命令把项目运行起来：

这样咱们的项目就运行起来了，那怎么查看效果呢？很简单，把上面红色框出来的这个地址放到浏览器中就可以看到效果啦：

好了，到这里你是不是以为今天的内容就结束了？No，咱们为了后续直接开发，所以再来为项目引入几个后面需要用的库，先别走，继续往下看吧。

四、集成Pinia

4.1、Pinia介绍

Pinia是最新一代轻量级状态管理插件，功能类似于Vuex。作为Vue.js生态中的状态管理解决方案，其核心定位是提供响应式数据存储和跨组件状态共享能力。

Pinia的优点：

对比维度

Pinia特性

Vuex特性

API设计

Composition API风格

Options API风格

类型支持

完善的TypeScript推断

需额外配置

体积

很小

相对较大

模块化

自动代码拆分

需手动处理

扩展性

支持本地存储/事务扩展

插件机制复杂

核心优势包括：

  • 简化存储定义：采用类组件式声明语法
  • 开发工具支持：完美兼容Vue DevTools
  • 服务端渲染：原生SSR支持
  • 性能优化：基于Vue3响应式系统构建

4.2、Pinia安装

在项目中安装Pinia：

  • 执行安装命令：在项目根目录运行npm install pinia --save
  • 验证依赖：检查package.json中是否新增对应版本号
  • 存储路径：状态管理文件应存放在src/store目录下

咱们使用VSCode打开项目工程，在package.json文件中可以看到已经添加了pinia的依赖：

接着在src目录下创建store文件夹，在store下创建index.ts文件，在文件中执行以下操作：

  • 导入创建方法：从pinia引入defineStore函数
  • 声明状态仓库：通过defineStore创建并命名存储实例
  • 导出实例：将创建的状态实例进行模块化导出

代码如下：

然后打开main.ts文件，在main.ts中引入上面创建的index.ts文件，并且执行以下操作：

  • 实例化Vue应用：创建createApp返回的实例对象
  • 挂载Pinia：通过.use(pinia)注入状态管理插件
  • 应用初始化：执行mount('#app')完成挂载
  • 清理冗余代码：移除旧版状态管理相关引用

代码如下：

五、集成VueUse

5.1、vueuse简介

  • VueUse是为Vue2和Vue3服务的一套Composition API常用工具集，是目前世界上star最高的同类库之一。
  • 主要功能是将原本不支持响应式的JavaScript API变得支持响应式，避免程序员重复编写相关代码。
  • 本质是基于Composition API的函数集合工具包，支持更好的逻辑分离，可快速实现常见功能。
  • 具体功能可通过VueUse官网查看。

5.2、vueuse安装

  • 安装步骤：在项目工程目录下执行npm install @vueuse/core命令
  • 验证安装：package.json文件的dependencies中会新增@vueuse/core依赖项

六、集成Vant

6.1、Vant简介

Vant是一个轻量可靠的移动端组件库，于2017年开源。官方提供Vue2版本、Vue3版本及微信小程序版本，由设计团队维护。

文档参考：https://vant.pro/vant/#/zh-CN

6.2、Vant安装

集成Vant需在项目根目录下执行npm install vant --save：

安装后package.json的dependencies中会显示Vant版本：

OK，今天的内容就到这里了，咱们下期再会！

祝：工作顺利！

标签
#Vue3 #pinia #vueuse #vant #前端开发
#node.js #npm
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》003-走进 Vue 3的新世界：Vue 框架初体验
热门推荐
愚公智库
08-18 16万+
随着前端技术的不断发展，各种框架应运而生，而 Vue.js 凭借其简洁、灵活的特性，成为了许多开发者的首选。如今，Vue 3 的推出为这个流行框架注入了更多活力与创新。在这个全新的版本中，不仅引入了组合式 API、改进的性能，还为开发体验带来了更多可能性。在这篇文章中，我们将通过一次轻松的“初体验”之旅，带你领略 Vue 3 的独特魅力。无论你是前端小白，还是已有经验的开发者，都能通过这个介绍迅速上手，感受到 Vue 框架的强大与易用性。让我们一起走进 Vue 3 的新世界，开启前端开发的新篇章吧！
vue3新手快速入门
Sy_planA的博客
06-03 1310
vue3新特性：组合式API（重点），更好的支持typescript（熟悉），状态存储框架pinia（重点），新组件（了解）官网地址：https://vuejs.org/。中文官网：https://cn.vuejs.org/Vue3 是 Vue2 的升级版本，在性能、语法和架构等方面都有显著改进。易学易用，性能出色，适用于场景丰富的web前端框架。9.创建并启动vue3工程项目。使用官方提供的创建vue工程。一、vue2和vue3区别。二、整体认识vue3项目。1、创建vue3工程。
vue cli 3.0 使用方法
悦涵仙子的技术笔记本
07-27 1734
几个链接： vue-cli3.0初体验～ https://segmentfault.com/a/1190000014123259 10分钟上手最新vue脚手架 https://segmentfault.com/a/1190000014094732
vuejs快速入门
qq_22075913的博客
11-13 2413
vuejs简单入门 1.VueJS 概述与快速入门 1.1 VueJS介绍 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ 1.2 MVVM模式 MVVM是 Model-View-ViewModel 的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和
Vue3快速入门
AdrianAndroid的专栏
02-16 2725
Vue3快速编程
Vue3快速入门，3小时从零基础到使用，全网最细！
sq91fra的博客
01-31 1万+
易于上手：Vue有一个渐进式框架的设计，这意味着你可以从使用Vue作为页面中的一部分开始，然后逐步扩展到更复杂的应用程序。文档齐全：Vue的官方文档非常全面，对于初学者和有经验的开发者都非常友好。响应式数据绑定：Vue的双向数据绑定功能使得模型（Model）和视图（View）之间的同步变得非常简单。组件化：Vue鼓励开发者使用组件化的方式构建应用，这有助于代码的复用和管理。生态系统：Vue有一个活跃的社区，提供大量的插件和工具，如Vuex（状态管理）、Vue Router（路由管理）等。轻量级。
Vue3快速入门：从零到项目实战
YunWisdom
05-08 2048
Vue3是Vue.js框架的最新版本，是一个用于构建用户界面的渐进式JavaScript框架。Vue.js特别适合构建动态的、响应式的单页面应用（SPA），它注重视图层的渲染，通过双向数据绑定和响应式的数据模型，帮助开发者以一种简单、高效的方式创建复杂的交互界面。Vue3引入了很多新的功能和改进，如更好的性能优化、更灵活的组合式API（Composition API）等，这让它比Vue2更加轻量、快速、模块化，适合大型应用的开发。
VueJS 概述与快速入门
少营营的博客
07-11 809
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn...
Vue3入门介绍及快速上手
小林的博客
11-08 2621
所以对于前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。我们来看下面这个图，有三个组件，组件A的子组件分为是B和C，其中B和C是兄弟关系。我们这次重点研究是父子组件的通信，如果想要实现B和C的通信，需要使用第三方组件pinia才行（不是课程重点）介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
Vue3入门指南：从零到精通的快速上手
2202_75362371的博客
06-05 2466
index.ts//定义一个接口，用于限制Person对象的具体属性id:string,age:number//定义一个自定义类型Person.vue<template></div>let person:PersonInter = {id:'01',name:'齐爷',age:20} //接口规范let personList:Persons = [ //泛型约束{id:'01',name:'齐爷',age:20},{id:'02',name:'齐爷1',age:21},
vuejs简单入门
weixin_40055163的博客
03-14 3956
1 VueJS 概述与快速入门 1.1 VueJS介绍 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ 1.2 MVVM模式 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 8933
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
Vue3.0快速入门
weixin_40398599的博客
09-09 6633
一、安装 1. cdn <script src="https://unpkg.com/vue@next"></script> 2. npm $npm install vue@next 3. vue-cli 需要升级到Vue CLI v4.5 yarn global add @vue/cli@next # OR npm install -g @vue/cli@next 4. vite 使用 vite 体验更快速 #npm $ npm init vite-app &lt
vue3的快速入门
lizi88888的博客
09-18 2064
js/filters.js，代码：// 全局范围定义的过滤器function(v){//就是来格式化(处理)v这个数据的if(v==0){returnvreturnv.toFixed(2)+"元"})<head></head><body></div><script>const vm =new Vue({ // 在vue3.0以后，替换成了Vue.createApp()
如何快速入门 Vue 3
lizi88888的博客
09-13 1152
创建自定义的 Hook 来复用逻辑：javascript代码解读复制代码</script>Vue 3 带来了许多激动人心的新特性和改进，通过上述步骤，你可以快速入门并开始构建现代化的前端应用。不断实践和探索，你将能够充分利用 Vue 3 的强大能力。作者：乘风77链接：https://juejin.cn/post/7377658332842377227来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
Vue3：基础入门
CaptainDrake的博客
04-22 9479
vue简介、vue的基本使用、vue的指令与过滤器、品牌列表案例
Vuejs基础入门
『愚』的博客
12-01 8147
Vuejs基础入门Vue概述早期前后端分离模式MVVM框架Vue简介Vue.js快速入门安装Vue环境Hello World程序 Vue概述 早期前后端分离模式 早期的前后端分离开发模式是这样的： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
NodeVerdict：Node.js 原生诊断数据可视化工具
最新发布
少年负志 心向星河 以代码为笔 以技术为锋 笃行致远 静候同路 写可懂之文 做可用之技 与君共赴山海
08-05 751
NodeVerdict 是一款基于浏览器的 Node.js 诊断数据查看工具，消费 diagnostics_channel.TracingChannel 原生事件，提供事件列表、瀑布图、CPU 火焰图、堆快照分析、GC 日志解析、性能对比及报告生成等功能。所有数据在浏览器本地处理，不上传任何服务器。项目还提供 WebSocket 实时监控 Agent 和性能门禁 CLI，适用于开发调试、性能分析和 CI 集成场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值