目录
前言
一、搭建环境
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，今天的内容就到这里了，整体看下来还是很轻松的，下期再会！
