青训营笔记一、Vite 的认识 Vite 是构建工具，高阶封装，Vite 的特点，如下所示：开发时效率极高开箱即用，

一、Vite 的认识 Vite 是构建工具，高阶封装，Vite 的特点，如下所示：开发时效率极高开箱即用，功能完备社区丰富，兼容 rollup 超高速热重载预设应用和类库打包模式前端类库无关 Vite 的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server 等等。Vite 和传统构建工具的区别，如下所示： High Level API 不包含自己编译能力完全基于 ESM 加载方式的开发时 Vite 减少了很多配置量，减少的工作，如下所示： dev server 各类 loader build 命令 Vite 的优势，如下所示：上手非常简单开发效率极高社区成本低没有晦涩的配置有自身的插件系统，生态兼容 rollup 插件 vite 更合理的类比，如下所示： vue-cli create-react-app cra 需要 eject vue-cli 的 configureWebpack 和 chainWebpack 传统的构建工具，entry -> 多个 route -> 多个 module -> Bundle -> Server ready。对于 Vite 来说， Server ready -> HTTP request -> entry -> 多个 route -> 多个 module，这是使用了 Esbuild 工具。 Vite 是伴随 Vue3 正式版一起发布，1.0 版本中以 Vue3 为主，2.0 版本中跨框架。二、Vite 基础应用的 vite 创建 vue3 项目、vue3 使用 JSX、vite 创建 vue2 项目、vite 创建 react 项目、postcss、@import alias、css-modules 和 css pre-processors Vite 创建 vue3 项目，如下所示：通过 npm init @vitejs/app 命令开始创建项目

在使用 vite 创建的 vue3 项目中，如果想使用 jsx，如下所示：

通过 yarn add @vitejs/plugin-vue-jsx -D 命令下载插件
在 vite.config.js 中，引入 plugin-vue-jsx 插件，代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
 plugins: [vue(), vueJsx()]
})

在 src 目录下创建 App.jsx，代码如下：

import { defineComponent } from 'vue';
export default defineComponent({
 setup() {
   return () => {
     return <div>hello vue3 jsx</div>;
   };
 }
});

main.js：

import { createApp } from 'vue'
import App from './App'

createApp(App).mount('#app')

在 vite 中，推荐使用 css variable 进行使用，并且也已经集成了 postcss，会通过 postcss 进行编译，有各种 postcss-plugins 插件，如下所示：新建 postcss.config.js 文件，引入 postcss-plugins/console，它可以在编译 css 的时候进行输出，代码如下：

module.exports = {
 plugins: [require("@postcss-plugins/console")],
};

在 vite 中，可以使用 @import alias 进行文件的别名设置，如下所示：

在 vite.config.js 中，设置 alias，代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@styles": "/src/styles",
    }
  }
})