关于vue.js:种草-Vue3-中几个好玩的插件和配置

小伙伴们晓得 TienChin 我的项目前端用的是 Vue3，当咱们把 Vue3 官网刷了一遍之后回来看 TienChin 我的项目的前端，发现还是有很多不太一样的中央，明天松哥就来和大家捋一捋 Vue3 中几个好玩的插件和配置，学完之后，置信大家对 TienChin 我的项目前端的很多写法就明确了。

首先来给大家介绍一下 Vite，尽管这在 Vue3 中并不是必须的，然而思考到 TienChin 我的项目前端用了这个，还是给大家略微说两句。

Vite（法语意为 “ 疾速的 ”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，可能显著晋升前端开发体验。它次要由两局部组成：

一个开发服务器，它基于原生 ES 模块提供了丰盛的内建性能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它应用 Rollup 打包你的代码，并且它是预配置的，可输入用于生产环境的高度优化过的动态资源。

Vite 意在提供开箱即用的配置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，并有残缺的类型反对。

如果小伙伴们绝得生疏，那么无妨回顾下咱们之前在 vhr 中给大家介绍的 Webpack，其实这个 Vite 相当于就是 Webpack。相比于 Webpack 的传统工具，Vite 最大的特点就是快。

Vite 通过在一开始将利用中的模块辨别为依赖和源码两类，改良了开发服务器启动工夫，因为依赖变动小而源码才是常常会变的货色。

不晓得小伙伴们看到这里有没有想到咱们 Java 中也有一个相似的玩意，那就是 Spring Boot 热加载。

Spring Boot 的热加载中用到了两个类加载器：一个是 base classloader，专门用来加载一些第三方的类；还有一个是 restart classloader，专门用来加载咱们本人写的类。热加载的时候，只须要 restart classloader 工作即可。

好了，对于咱们 Java 工程师来说，大家晓得 Vite 是一个我的项目构建工具就能够了，接下来的例子我要通过 Vite 来和大家演示。

在 TienChin 我的项目中，小伙伴们看到，很多本来须要导入之后能力用的办法，居然都不须要导入就能够应用。

我创立一个我的项目来给大家演示看下。

咱们用 Vite 来构建一个我的项目。

如果你的 npm 版本是 6.x，那么执行如下命令创立一个 Vue3 工程：

npm create vite@latest my-vue-app --template vue

如果你的 npm 版本是 7+，那么执行如下命令创立一个 Vue3 工程：

npm create vite@latest my-vue-app -- --template vue

这个 Vue 工程创立胜利之后，没有 router 啥的，须要咱们本人装置上，这个惯例操作我就不多说了。

当初我举一个简略的例子，比如说在 MyVue01 这个页面上有一个按钮，点击之后，能够跳转到 MyVue02 这个页面，那么咱们的点击事件能够依照如下的形式来写：

<script setup>
    import {useRouter} from 'vue-router';
    const router = useRouter();
    function go() {router.push("/my02");
    }
</script>

首先咱们须要从 vue-router 中导入 useRouter 函数，而后调用该函数能够获取到 router 对象，再调用 router 中的 push 办法就能够实现页面跳转了。

以前在 Vue2 中，咱们个别都是通过 this.$router 来获取到 router 对象，而后通过 router 对象来实现页面导航操作。然而在 Vue3 中，没有 this 了，不过 Vue3 中提供了一个 getCurrentInstance 办法来获取以后 Vue 实例，所以页面跳转，咱们也能够依照上面这种形式来写：

<script setup>
    import {getCurrentInstance} from 'vue';

    const {proxy} = getCurrentInstance();

    function go() {proxy.$router.push("/my02");
    }
</script>

这里的 proxy 就相似于以前 Vue2 中的 this。

松哥这里是以 router 为例来和大家演示，如果是 Vuex/Pinia，也有相似的写法，我就不挨个演示了。

无论是下面那种写法，都须要首先导入一个函数，而后能力开始应用。然而咱们在 TienChin 我的项目的前端代码中，尽管也有导入，然而像下面这两个例子中导入都是没有的，那是怎么回事？

这就借助于一个主动导入的工具了。

前端有一个工具插件叫做 unplugin-auto-import，通过这个插件能够实现一些办法的主动导入。该办法的应用步骤如下：

装置插件：

npm i unplugin-auto-import -D

因为这个插件只是一个开发辅助工具而已，所以装置的时候加上 -D 参数，这样就会装置到 devDependencies 中了。

配置插件：

插件的配置是在我的项目根目录下的 vite.config.js 文件中进行配置的，内容如下：

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({
        // 能够自定义文件生成的地位，默认是根目录下，应用 ts 的倡议放 src 目录下
        // dts: 'src/auto-imports.d.ts',
        imports: ['vue','vue-router']
    })]
})

小伙伴们留神正文掉的代码，这个插件配置好之后，启动我的项目，默认会在 node_modules/unplugin-auto-import/auto-imports.d.ts 地位生成一个文件，然而配置 dts 属性能够批改这个文件生成的地位。

imports 则是指须要主动导入的办法都是哪里的办法，以咱们前文中的两个案例为例，useRouter 是 vue-router 中的办法，getCurrentInstance 办法则是 vue 中的，所以这里导入我抉择了 vue 和 vue-router，当然，小伙伴们在开发中，如果有须要，也能够导入 Vuex/Pinia 等。

配置好了插件之后，咱们当咱们再次须要应用下面那些办法的时候，就不须要导入了，间接用即可：

<script setup>

    const {proxy} = getCurrentInstance();

    function go() {proxy.$router.push("/my02");
    }
</script>

useRouter 也不须要导入了。

<script setup>

    const router = useRouter();
    function go() {router.push("/my02");
    }
</script>

当前，但凡 vue 和 vue-router 中的办法都是不须要导入就能够应用了，其余组件中的办法则还是跟以前一样，必须导入之后才能够应用。

以前在 Vue2 中，咱们导入组件的时候，可能都习惯省略 .vue 后缀，毕竟用 WebStorm 开发的时候，零碎主动导入的时候也会帮咱们省略掉这个后缀，写法相似上面这样：

import MyVue01 from "../views/MyVue01";
import MyVue02 from "../views/MyVue02";

然而当初在 Vite 中，如果还是这样写就会报错，相似上面这样：

当初必须要写后缀了，然而有的人就是不习惯写后缀，那怎么办？咱们能够在 vite.config.js 中增加如下配置，这样就能够不必写 .vue、.js 等后缀了。

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({
        // 能够自定义文件生成的地位，默认是根目录下，应用 ts 的倡议放 src 目录下
        // dts: 'src/auto-imports.d.ts',
        imports: ['vue','vue-router']
    })],
    resolve: {extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

好了，当初大家明确了为什么 TienChin 我的项目前端都不写 .vue 了吧。

以前在 Vue2 中，咱们能够通过如下形式给一个 Vue 组件设置名称：

<script>
    export default {
        name: "MyVue03",
        mounted() {console.log("MyVue03")
        }
    }
</script>

在 Vue3 中，咱们如果将 setup 写到 script 节点中的话，就没法定义 name 了，如果还须要应用 name 属性的话，那么能够再定义一个 script 节点，专门用来配置 name 属性，如下：

<script setup>

    import {useRouter} from 'vue-router';

    const router = useRouter();

    function go() {router.push("/my02");
    }
</script>

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

提醒，咱们在调试页面中，就能够看到自定义的组件名了：

不过这种写法多多少还是有点麻烦。

通过 vite-plugin-vue-setup-extend 插件能够简化在 Vue3 中设置 name 属性，装置该插件之后，咱们就能够间接在 script 节点中定义 name 属性的值了，装置形式如下：

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

装好之后，在 vite.config.js 中再进行配置一下，如下：

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({
            // 能够自定义文件生成的地位，默认是根目录下，应用 ts 的倡议放 src 目录下
            // dts: 'src/auto-imports.d.ts',
            imports: ['vue', 'vue-router']
        }),
        VueSetupExtend()],
    resolve: {extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

VueSetupExtend 就是 vite-plugin-vue-setup-extend 插件的配置。

配置实现后，咱们就能够通过如下形式来定义 name 属性了：

<script setup name="JavaboyVue">

    import {useRouter} from 'vue-router';

    const router = useRouter();

    function go() {router.push("/my02");
    }
</script>

间接在 script 节点中加一个 name 属性就行了。

好啦，明天就先和大家介绍这么多吧～TienChin 我的项目的前端还用到一个 VueUse 工具，这个松哥前面再抽空和大家介绍～

关于vue.js:种草-Vue3-中几个好玩的插件和配置

1. Vite

2. 主动导入常见办法

2.1 传统写法

2.2 主动导入

3. 组件去后缀

4. name 属性问题

Just My Socks（注册教程内含优惠码）

关于vue.js:种草-Vue3-中几个好玩的插件和配置

1. Vite

2. 主动导入常见办法

2.1 传统写法

2.2 主动导入

3. 组件去后缀

4. name 属性问题

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）