美文网首页程序之路
Vue3+Vite简单使用

Vue3+Vite简单使用

作者: 云高风轻 | 来源:发表于2022-06-16 09:19 被阅读0次

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
  1. 直接输入项目名字就行不用点击删除 创建.png
  2. 上下键选择框架 框架.png
  1. Vue3对TS支持非常好,所以选择是否使用TS,这里我们选择TS,拥抱趋势 TS.png
  1. 完整的配置 1.png
  2. 这里创建脚手架的速度非常,敲完回车立即就完成了创建,这就是Vite的优势快
  3. 注意这个脚手架是空的没有routervuex之类的预设模板选择,需要什么都需要单独安装,单独配置,有需要的话在单独写个router
  4. 根据提示 cd到项目文件夹下
  5. 安装依赖 npm install
  6. 运行项目 npm run dev
  7. 效果图 效果图.png
  8. 注意我这个vite版本,运行速度也非常快

4. 依赖 安装

  1. 以 Pinia 为例安装指令
npm install pinia
  1. 效果图 pinia.png
  1. 注意各个依赖的版本,因为最近这Vue3和相关的插件都还在稳步迭代更新中

5. 后记

  1. 更多的配置改天在写

参考资料

Vite


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉

相关文章

网友评论

    本文标题:Vue3+Vite简单使用

    本文链接:https://www.haomeiwen.com/subject/nsnfvrtx.html