hello 大家好，🙎🏻♀️🙋🏻♀️🙆🏻♀️
我是一个热爱知识传递，正在学习写作的作者，ClyingDeng 凳凳！
vite 简介
首先，知道vite的，都知道Vite是一个开发构建工具。
特点就是：启动快、更新快。
至于它是为什么快呢？
原因主要有两个：
1、vite利用浏览器native ES Module特性按需导入源码，浏览器直接向devServer 逐个请求各个模块，而不需要将所有文件打包。
2、vite借助 esbuild 超快的编译速度把第三方库进行预构建，一方面将零散的文件打到一起，减少网络请求，另一方面全面转换为 ESM 模块语法，以适配浏览器内置的 ESM 支持。
vite不仅体验丝滑，而且不会随着项目规模的变大，使开发过程出现卡顿。请求一个页面，就加载页面相关内容，当然其根本原因还是模块的按需导入。
至于担忧的话，vue3在还不支持proxy的浏览器上无法使用(无需担忧插件的兼容性问题)。
vite API 使用
结构目录
在html中：
<script type="module" src="/src/main.js"></script>
index是宿主，mian.js是入口。esm模块化方式引入main.js。根据只加载所需运行的页面。
静态资源加载
对于img图片 我们可以这样使用：
<img alt="Vue logo" src="@/assets/logo.png" /> <img alt="Vue logo" :src="logo" /> <script setup> import logo from './assets/logo.png' </script>
不仅可以静态绑定图片，还可以通过js导入，动态绑定。但是对于这来个那种绑定来说，多少还是有点区别的：
可以看出vite内部会对sfc文件进行编译，可看出会在页面上create一新的元素节点，其图片路径也变成了相对应的。
又或者这样设置图片：(可以在vite.config.js中去配置@别名。)
<div class="log"></div> <style> .log { background-image: url(@/assets/logo.png); width: 200px; height: 200px; } </style>
style
在导入全局css文件时，直接全局直接import 所需全局文件即可。但是对于局部的，css文件引入我们有两种方式，一种模块化module、一种scoped。
<template> <img alt="Vue logo" src="./assets/logo.png" /> <img alt="Vue logo" :src="logo" /> <div :class="$style.log"></div> hello word </template> <script setup> import logo from '@/assets/logo.png' </script> // 模块化 <style module> .log { background-image: url(@/assets/logo.png); width: 200px; height: 200px; border: 1px solid #333; } </style> <style scoped> img { border: 1px solid #f0f; } </style>
通过控制台，我们也可以看出两种不同的style方式，其编译的结果也不同。module方式会将类名进行单独命名，而scope会在相应元素上加上data-v，选择器会侵入到元素内部。
模块化css
在vite中，样式解耦的方式也与之前有所不同。在样式中以.module.css结尾的是模块化css。多个sfc中可以共同使用同一个css文件下的某个样式。
<div :class="classes.log">kkk</div> <script setup> // 模块化css import classes from './index.module.css' </script> // index.module.css文件 .logo { background-image: url(@/assets/logo.png); width: 200px; height: 200px; }
scss
直接安装sass依赖，在style上加上lang="scss" 就可使用scss语法
postcss
使用postcss，我们可以安装postcss的一个插件。autoprefixer插件依赖（添加供应商前缀）。
在项目中添加postcss.config.js
module.exports = { plugins: [ require('autoprefixer'), ] }
如果我们要修改输入框的placeholder样式，可以这样使用：
<input type="text" placeholder="请输入" /> ::placeholder { color: aqua; }
其他
关于ts、数据mock、代码规范可以自己去查看相关阐述。尤其是代码规范eslint版本匹配可能会存在很多版本不兼容，这个是会存在很多版本不兼容的问题的。
下面是一个比较推荐的依赖配置：
"@typescript-eslint/eslint-plugin": "^4.15.2", "@typescript-eslint/parser": "^4.15.2", "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^7.0.0", "@vuedx/typescript-plugin-vue": "^0.6.3", "eslint": "^7.20.0", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.6.0", "prettier": "^2.2.1",
期望
虽然vite的构建速度很快，但是仍旧有许多提示不友好，不稳定的问题存在。
在vite的推广之路上，仍旧是任重道远。
感兴趣的朋友可以关注 vite系列专栏或者点击关注作者哦！会持续输出vite相关知识哦(●'◡'●)。 如果不足，请多指教。
