简介
前言
之前vite2刚出的时候其实已经自学过一波，但是老实说学起来完全不入脑，一方面本来这方面的基础就很差（指项目配置），另一方面学的时候没有跟着去动手，纯理论的学那完全就是越看越困 。最后就是急躁，想一下就学完 。所以到现在来说基本上就是零基础 。这次痛并思痛，跟着文档一步一步来 。
官方文档
Vite?.dev/guide/
简介[1]
是用来干什么的一目了然：提高开发体验感的，并且仅支持标准（现代）浏览器（>= IE 9`？不清楚9算不算，但是没差，IE已经不再维护了） 。
注意这里是”()开发“，而打包还是交由处理 。
拥抱ES [2](现代浏览器天然支持)而非[3] 。
上手
话不多说，直接上手 。如果你不想一步一步配置的话，可以直接看官方的demo[4] 。
不过学习嘛，还是一步一步来好些 。
先创建个文件夹，然后初始化下环境
mkdir vite-studycd vite-studynpm init --yes
然后安装下vite,推荐是全局安装，因为cli做了各种框架的基础配置，能快速生成项目 。
npm install vite --globalnpm install vite -D
安装完之后我们先什么都不动，仅新增个index.html文件，记住这里和不同，直接放根目录，vite会在根目录里找，这是因为vite将index.html当做入口的原因 。
vite study555
然后.json中配置下
"scripts": {"dev": "vite"},
然后直接终端执行指令npm run dev
run-
非常简单，非常傻瓜，这样就跑起来啦 。
但其实只是起了个koa[5]服务器而已，和你自己手动起的没差，甚至不需要koa，直接就http[6]模块开就行了 。
现在我们再给这个index.html加点js和css文件 。
echo > index.cssecho > index.js
index.css随便搞点样式
.test {color: red;}
index.js中这个index.css文件
import './index.css';
然后重新再跑一下指令npm run dev 。
然后你会发现没有任何变化，因为我们压根没有给他们之间建立联系
直接在index.html中引入这个index.js文件，不过需要注意一点，的type需要是，这样才能被识别是ES ,才能支持 等 。
vite study555
然后ctrl + s自动
img-2
如果的type不是，你在运行的时候浏览器就会报错 。
img-3
如果你细心的话应该会发现你的index.css中的样式被打上了-id:data-vite-dev-id 。如果你之前看过我的文章你会知道这里搞个自定义id的作用是啥，一是作用域样式不会污染其它模块样式；二则是热更新可以直接找到这个style标签然后直接覆盖替换 。
img-4
然后没啥好说的了，我们接着直接来接入框架了 。
不过到现在都没用到vite..js，有些憋屈，所以得找个理由改下配置~ 。
有了，dev的域名端口太丑~，我们来改下 。
我们先在根目录创建vite..js，然后配置下[7]
import { defineConfig } from 'vite'export default defineConfig({server: {port: 6666}})
然后ctrl + s即可~
配置vue
vite虽然可以和其他框架比如react、等框架配合，但最适合那自然还是vue（非技术方面，纯感性~） 。
先安装vue以及能让vite“识别”vue的:@/-vue[8]
npm install vue --savenpm install @vitejs/plugin-vue -D