使用Vite快速构建Vue3+ts+pinia脚手架

一、前言

vue2+webpack 的时代要过去了，主要是启动时间太慢了。所以还是比较推荐使用 Vite 进行构建，vue3官方也是推荐的！！速度快，基本上是秒杀级别的！带的例子还是vue3最新的组合式语法糖 setup 。

二、vite介绍和搭建

1. 介绍

Vite官网

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

Vite3 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

2. 搭建

废话不多说咱们直接构建：

要使用 Vite 来创建一个 Vue 项目，非常简单：

npm init vue@latest

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。

随后输入项目名称即可

image.png

随后进行一段操作进行构建脚手架：

image.png

3. 参数解释

为了大家可以更清楚看到，在下面再写一遍：

image.png

4. 在idea中使用

安装依赖

npm install

安装es语法检查

npm run lint

运行项目

npm run dev

启动还是很快的！！

image.png

页面正常，搞定手工！

image.png

5. vue3语法糖

这可以是一个vue3文件的模板

三、Pinia 介绍

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}) 。这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以使用 Pinia 中获得很多好处：

dev-tools 支持

• 跟踪动作、突变的时间线
• Store 出现在使用它们的组件中
• time travel 和 更容易地调试

热模块更换

• 在不重新加载页面的情况下修改您的 Store
• 在开发时保持任何现有状态

插件：使用插件扩展 Pinia 功能

为 JS 用户提供适当的 TypeScript 支持或 autocompletion

服务器端渲染支持

Pinia ：是新版的 vuex ，简化了 vuex ，效率更快，上手更快，推荐推荐大家在 vue3 使用，当然他也支持 vue2 。

pinia的图标还是比较可爱的！！

pinia官网

image.png

四、总结

这样就搭建成功了，其实很简单，主要是借此聊聊Vue3+ts+pinia，新东西还是要多接触，虽然咱是后端，技多不压身嘛！！

有缘人才可以看得到的哦！！！