Vite 基础之 Vite 的认识、Vite 基础应用的 vite 创建 vue3 项目、vue3 使用 jsx、vite 创建 vue2 项目、vite 创建 react 项目、postcss

一、Vite 的认识

1. Vite 是构建工具，高阶封装，Vite 的特点，如下所示：

• 开发时效率极高
• 开箱即用，功能完备
• 社区丰富，兼容 rollup
• 超高速热重载
• 预设应用和类库打包模式
• 前端类库无关

2. Vite 的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server 等等。Vite 和传统构建工具的区别，如下所示：

• High Level API
• 不包含自己编译能力
• 完全基于 ESM 加载方式的开发时

3. Vite 减少了很多配置量，减少的工作，如下所示：

• dev server
• 各类 loader
• build 命令

4. Vite 的优势，如下所示：

• 上手非常简单
• 开发效率极高
• 社区成本低
• 没有晦涩的配置
• 有自身的插件系统，生态兼容 rollup 插件

5. vite 更合理的类比，如下所示：

• vue-cli
• create-react-app
• cra 需要 eject
• vue-cli 的 configureWebpack 和 chainWebpack

6. 传统的构建工具，entry -> 多个 route -> 多个 module -> Bundle -> Server ready。对于 Vite 来说， Server ready -> HTTP request -> entry -> 多个 route -> 多个 module，这是使用了 Esbuild 工具。
7. Vite 是伴随 Vue3 正式版一起发布，1.0 版本中以 Vue3 为主，2.0 版本中跨框架。

二、Vite 基础应用的 vite 创建 vue3 项目、vue3 使用 JSX、vite 创建 vue2 项目、vite 创建 react 项目、postcss、@import alias、css-modules 和 css pre-processors

1. Vite 创建 vue3 项目，如下所示：

• 通过 npm init @vitejs/app 命令开始创建项目，如图所示：

• 需要确认以下的信息，如图所示：

名称	作用
Project name	输入项目的名字，选择确认，如 vite-vue3
Select a framework	选择创建的模版，有 vanilla、vue、react、preact、lit、svelte 等模版信息，选择 vue
Select a variantb	选择创建的格式，有 ts 版本和无 ts 版本，如 vue 和 vue-ts，选择 vue

• 创建完成后，切换项目目录，如 cd vite-vue3，通过 npm install 命令下载依赖，通过 npm run dev 命令启动项目，如图所示：
  

2. 在使用 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 中，引入 App.jsx，代码如下：

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

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

3. Vite 创建 vue2 项目，如下所示：

• 通过 npm init @vitejs/app 命令开始创建项目，如图所示：
  

• 需要确认以下的信息，如图所示：

名称	作用
Project name	输入项目的名字，选择确认，如 vite-vue2
Select a framework	选择创建的模版，有 vanilla、vue、react、preact、lit、svelte 等模版信息，选择 vanilla
Select a variantb	选择创建的格式，有 ts 版本和无 ts 版本，选择 vanilla

• 创建完成后，切换项目目录，如 cd vite-vue2，通过 npm install 命令下载依赖，通过 npm run dev 命令启动项目，如图所示：
  

• 通过 yarn add vite-plugin-vue2 -D 命令下载 vite-plugin-vue2 插件，通过 npm install vue@2.6.14 -S 命令下载 vue，新建 vite.config.js 文件，代码如下：

import { createVuePlugin } from "vite-plugin-vue2";

export default {
 plugins: [createVuePlugin()],
};

• 新建 src 目录，将 main.js 移入 src 中，修改 index.html 中 main.js 的引入路径，新建 App.vue 并引入到 main.js 中，main.js 如下：

import Vue from "vue";
import App from "./App.vue";

new Vue({
 el: '#app',
 render: (h) => h(App),
}).$mount();

4. react-hot-loader，fastRefresh，优势，如下所示：

• 解决很多 rhl 无法解决的问题
• 速度更快
• 支持局部更新

5. Vite 创建 react 项目，如下所示：

• 通过 npm init @vitejs/app 命令开始创建项目，如图所示：

• 需要确认以下的信息，如图所示：

名称	作用
Project name	输入项目的名字，选择确认，如 vite-react
Select a framework	选择创建的模版，有 vanilla、vue、react、preact、lit、svelte 等模版信息，选择 react
Select a variantb	选择创建的格式，有 ts 版本和无 ts 版本，如 react 和 react-ts，选择 react

• 创建完成后，切换项目目录，如 cd vite-react，通过 npm install 命令下载依赖，通过 npm run dev 命令启动项目，如图所示：

6. 在 vite 中，推荐使用 css variable 进行使用，并且也已经集成了 postcss，会通过 postcss 进行编译，有各种 postcss-plugins 插件，如下所示：

• 新建 postcss.config.js 文件，引入 postcss-plugins/console，它可以在编译 css 的时候进行输出，代码如下：

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

• 新建 index.css 文件，代码如下：

:root {
  --main-bg-color: blue;
}
.root {
  /* 编译 css 的时候进行输出 */
  @console.error hello root
  color: var(--main-bg-color);
}

7. 在 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",
    }
  }
})

• 在 styles 目录中，新建 index.css 和 other.css，在 index.css 中引入 other.css，代码如下：

@import url("@styles/other.css");

:root {
  --main-bg-color: blue;
}
.root {
  @console.error hello root
  color: var(--main-bg-color);
}

• 在 App.jsx 中，引入 index.css，代码如下：

import "@styles/index.css";

8. 在 vite 中，支持 css-modules，以 modules.css 结尾的文件就会被自动识别为 css-modules 文件进行使用，比如新建 test.modules.css 文件，在 App.jsx 中使用，代码如下：

import { defineComponent } from 'vue';

// import './styles/index.css';
import "@styles/index.css";
import classes from '@styles/test.modules.css';

export default defineComponent({
  setup() {
    return () => {
      return <div class={`root ${classes.moduleClass}`}>hello vue3 jsx</div>;
    };
  }
});

9. 在 vite 中，也支持 css pre-processors，比如使用 less 进行样式的修改，可以使用 yarn add less 命令添加 less。