美文网首页程序之路
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