【若依】21、Vite

Vite Vite 是一个前端构建工具，类似于我们在 Vue2 中使用的 Webpack。 Vite 相比于 Webapck，最大的优势在于快！

Spring Boot 热加载原理：Spring Boot 中提供了两个类加载器：

• base classloader：这个主要用来加载各种第三方的类（各种依赖中的类，这些类的特点是不会变）。
• restart classloader：这个用来加载我们自己写的类。

Vite 快的思路和 Spring Boot 热加载基本上是一致的。在 Vite 中，将项目的模块分为两种：

• 依赖（变化小，大部分时间都是不变的）
• 源码（经常变化的是源码）

  创建一个基于 Vite 的项目

1. 注意，需要 nodejs 版本大于 14.18。

nvm 在同一台电脑上安装多个版本不同的 node_月牙坠的博客-CSDN博客

1. 需要注意，要根据不同的 npm 版本，使用不同的创建命令。

Vite 创建三个步骤：

npm create vite@latest vue3——03 -- --template vue
cd vue3_03
npm install
npm run dev

方法自动导入

在 Vue3 中，当我们要使用某一个方法的时候，必须先导入这个方法，以页面跳转为例，有如下两种跳转方式： 第一种写法，首先从 vue 中导入 getCurrentInstance 方法，然后获取 proxy 对象，这个 proxy 对象就相当于之前 Vue2 中的 this。

import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance()
function goUserManage() {
  proxy.$router.push('/um')
}

第二种写法，直接从 vue-router 中导入 router 对象，然后调用 router 对象实现页面的跳转：

import {useRouter} from 'vue-router'
const router = useRouter()
function goRoleManage() {
  router.push('/rm')
}

无论哪种方式，都需要先导入方法/组件，然后才能使用。如果使用了 vite，那么我们可以通过 unplugin-auto-import 插件来实现方法的自动导入。 插件使用步骤：

1. 安装插件：

   npm install unplugin-auto-import -D
   

2. 配置插件(vue3_03/vite.config.js) ```javascript import { defineConfig } from ‘vite’ import vue from ‘@vitejs/plugin-vue’ import AutoImport from ‘unplugin-auto-import/vite’

// https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), AutoImport({ imports: [‘vue’] })] })

`imports: ['vue']`配置的含义是，凡是 vue 中提供的方法，现在都不需要导入就可以直接使用了。
如果还想自动导入 vue-router 中的配置，方式如下：
```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), AutoImport({
    imports: ['vue', 'vue-router']
  })]
})

一般来说，一些使用频率特别高的组件中的方法（例如 vue、vue-router、vuex/pinia），可以通过这种方式来导入，一些冷门的组件方法，建议还是自己手动导入。

组件后缀问题

在 Vite 中，当需要导入一个组件的时候，默认情况下，必须加上 .vue 后缀，无论是在 router 中还是在普通的 .vue 文件中，都需要加上这个后缀。但是很多小伙伴习惯了 webpack 中不写后缀，那么通过配置可以解决这个问题。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), AutoImport({
    imports: ['vue', 'vue-router']
  })],
  resolve: {
    extensions: ['.vue', '.js']
  }
})

这个配置表示后缀为 .vue.js 的文件，可以不写后缀。

组件名称问题

之前，我们可以通过如下方式来自定义组件的名称：

<script>
  export default {
    name: "UserManage"
  }
</script>

当我们将 setup 加在 script 节点中时，就没法去设置 name 属性了，此时，如果还需要设置 name 属性，那么可以通过如下方式来设置：

<script>
  export default {
    name: "UserManage"
  }
</script>

新加一个 script 标签，里边只写 export default 即可，然后配置一下组件名称即可。 通过插件可以简化这个操作。 首先安装插件：

npm install vite-plugin-vue-setup-extend -D

接下来配置组件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), AutoImport({
    imports: ['vue', 'vue-router']
  }), VueSetupExtend()],
  resolve: {
    extensions: ['.vue', '.js']
  }
})

配置完成后，接下来，就可以直接在 script 节点中定义组件的名称了：

<template>
  <div>
    <h1>用户管理</h1>
    <div></div>
  </div>
</template>

<script setup name="UserManage">
  const msg = ref('月牙坠')
</script>

<style lang='scss' scoped>

</style>