Vue3_02(vite)

浏览器原生支持模块化

?

1 2 3 4 5

#index.html <script src="./src/main.js" type="module"></script>   #main.js 可以使用 import导入  import {sum} from './js/math.js'

但是如果我们不借助于其他工具，直接使用ES Module来开发有什么问题呢？

首先，我们会发现在使用loadash时，加载了上百个模块的js代码，对于浏览器发送请求是巨大的消耗；
其次，我们的代码中如果有TypeScript、less、vue等代码时，浏览器并不能直接识别；

Vite的安装和使用

?

1 2 3 4 5

#安装 npm install vite –g # 全局安装 npm install vite –D # 局部安装 #启动 npx vite

vite可以直接支持css的处理

vite可以直接支持css的处理

　　直接导入css即可；
vite可以直接支持css预处理器，比如less
　　直接导入less；
　　之后安装less编译器；
vite直接支持postcss的转换：
　　只需要安装postcss，并且配置 postcss.config.js 的配置文件即可；

?

1 2	npm install less -D npm install postcss postcss-preset-env -D

Vite对TypeScript的支持

vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译，只需要直接导入即可；

ESBuild的特点：
　　超快的构建速度，并且不需要缓存；
　　支持ES6和CommonJS的模块化；
　　支持ES6的Tree Shaking；
　　支持Go、JavaScript的API；
　　支持TypeScript、JSX等语法编译；
　　支持SourceMap；
　　支持代码压缩；
　　支持扩展其他插件；

Vite对vue的支持

vite对vue提供第一优先级支持：
　　Vue 3 单文件组件支持：@vitejs/plugin-vue
　　Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
　　Vue 2 支持：underfin/vite-plugin-vue2

?

1 2 3 4 5 6 7 8 9

#安装 npm install @vitejs/plugin-vue -D   #vite.config.js import vue from '@vitejs/plugin-vue'   module.exports = {   plugins: [vue()] }

?

1 2 3 4

#打包 npx vite build #打包后代码预览 npx vite preview