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

一、Vite 的认识 Vite 是构建工具，高阶封装，Vite 的特点，如下所示： 开发时效率极高开箱即用，功能完备社区丰富，兼容 rollup超高速热重载预设应用和类库打包模式前端类库无关 Vite 的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server 等等。Vite 和传统构建工具的区别，如下所示： High Level API不包含自己编译能力完全基于 ESM 加载方式的开发时 Vite 减少了很多配置量，减少的工作，如下所示： dev server各类 loaderbuild 命令 Vite 的优势，如下所示： 上手非常简单开发效率极高社区成本低没有晦涩的配置有自身的插件系统，生态兼容 rollup 插件 vite 更合理的类比，如下所示： vue-clicreate-react-appcra 需要 ejectvue-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 命令开始创建项目，如图所示：

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

名称	作用
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 命令启动项目，如图所示：
在使用 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')

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();

react-hot-loader，fastRefresh，优势，如下所示： 解决很多 rhl 无法解决的问题速度更快支持局部更新 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 命令启动项目，如图所示：

在 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);
}

在 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";

在 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>;
    };
  }
});

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