首先附上官方文档地址：Home | Vite⚡
全局安装vite：
npm install create-vite-app -g
yarn global add create-vite-app
全局安装的时候，现在会提示一个warning create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app ` instead. 意思是现在不用全局安装了，可以直接使用yarn或者npm进行初始化，并且官方文档中也是推荐这种直接初始化的方式，但是声明了你的node版本必须大于等于12.0.0.
由于目前日常开发用的基本是vue，所以初始化的时候自动使用vue的模板：yarn create @vitejs/app demoname --template vue，创建了一个基于vue3.0的项目，但是这个项目中只是有了vue其他的什么都没有，接下来先yarn dev运行起来看一下，然后修改一点东西，会明显感觉到速度比以往使用webpack的方式快的不是一点半点。
项目结构
运行页面
在官方文档中有说明，webpack是确定入口以后，根据全部路由去加载特定的模块和依赖，然后整理集合成一个bundle，最后启动一个dev server去加载总的这些文件，而vite是首先启动一个dev server，然后根据当前显示的路由去匹配加载当前路由需要的模块和依赖，跳过了打包成一个bundle的过程，在拆分代码的过程中，仅需要服务当前路由页面使用的模块，那肯定会比webpack快很多。
目前先到这里，下一篇中会继续修改这个初始化的项目，变成一个我们熟悉的日常开发的目录结构，例如添加路由和vuex等
网友评论