Vue3+Vite简单使用

1. 前言

1. Vue3大势不可阻挡,与之而来的就是Vite ,尤雨溪极力推荐的前端开发与构建工具
2. vue3原生支持TS ,所以TS语法和vue3TS语法学起来
3. vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia

---

2. Vite是什么 what

1. 下一代前端开发与构建工具

---

3. Vite 项目创建

1. 创建脚手架项目
2. 不需要像之前一样全局安装脚手架哦
3. Node.js 版本 >= 12.0.0。
4. 下面一个指令轻松创建

npm init vite@latest

5. 直接输入项目名字就行不用点击删除
   创建.png

6. 上下键选择框架
   框架.png

7. Vue3对TS支持非常好，所以选择是否使用TS，这里我们选择TS，拥抱趋势
   TS.png

8. 完整的配置
   1.png
9. 这里创建脚手架的速度非常，敲完回车立即就完成了创建，这就是Vite的优势快
10. 注意这个脚手架是空的没有router，vuex之类的预设模板选择，需要什么都需要单独安装，单独配置，有需要的话在单独写个router
11. 根据提示 cd到项目文件夹下
12. 安装依赖 npm install
13. 运行项目 npm run dev

14. 效果图
    效果图.png
15. 注意我这个vite版本，运行速度也非常快

---

4. 依赖 安装

1. 以 Pinia 为例安装指令

npm install pinia

2. 效果图
   pinia.png

3. 注意各个依赖的版本，因为最近这Vue3和相关的插件都还在稳步迭代更新中

---

5. 后记

1. 更多的配置改天在写

---

参考资料

Vite

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉