一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    vite 开发与学习

    技术 193 2021-12-30 14:05

    现在的前端太卷了

    啥都要学

    不废话了 开始学习vite:

    先复制一些vite的特点和使用原因:

    (复制自胖哥的博客.. http://jspang.com/detailed?id=66


    Vite这个单词是一个法语单词,意思就是轻快的意思。

    它和我们以前使用Vue-cli的作用基本相同,都是项目初始化构建工具,

    相当于Vue项目构建的第二代产品,当然它也包含了项目的编译功能。

    需要注意一下Vite的生产环境下打包是通过Rollup来完成的,

    Rollup是JavaScriptd的模块bundler(打包器),可以将一小段代码编译为更大或更复杂的内容,例如库或应用程序。

    也就是说Vite提供的是开发环境中的编译,打包工作是依靠的Rollup


    Vite特性介绍

    Vite主打特点就是轻快冷服务启动。冷服务的意思是,在开发预览中,它是不进行打包的。

    开发中可以实现热更新,也就是说在你开发的时候,只要一保存,结果就会更新。

    按需进行更新编译,不会刷新全部DOM节点。这功能会加快我们的开发流程度。

    当然ViteVue-cli还有很多不同的地方,如何理解这种不同那?Vite属于第二代升级产品,这就好比你去红浪漫,有你熟悉的姑娘,这非常好,当然轻车熟路。但是来了年轻漂亮的新菇娘,在我们钱包允许的情况下,都会选择尝试体验的。

    说实话,我工作中也没有使用Vite,但是我自己的项目中,我愿意尝试这种新的东西。目前Vite还是属于Beta版本,官网Github虽然说在不久就会升级为正式版,但我对尤雨溪团队的理解,这个不久至少在半年以上。

    所以自己学习,自己使用没有问题,工作中尽量不用太新的技术,我是吃过亏的。


    看了胖哥的视频大多是讲直接搭建vue和react的直接的开发环境的

    类似于vue-cli / creact-react-app

    没有其它很特殊的地方:

    直接写一下构建命令吧:

    vite 构建vue版本:

    npm init vite-app <project-name>
    cd <project-name>
    npm install
    npm run dev
    

    vite 构建react版本

    npm init vite-app --template react
    npm install
    npm run dev
    

    由于此篇文章的学习目的是vite的配置相关

    后面的内容会更新一些配置相关的内容:

    后续会更新

    参考文档:https://vitejs.cn/guide/




    文章评论

    评论列表(0