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

3次阅读

共计 4921 个字符，预计需要花费 13 分钟才能阅读完成。

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

1. Vite

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

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

  1. 一个开发服务器，它基于 原生 ES 模块 提供了 丰盛的内建性能，如速度快到惊人的 模块热更新（HMR）。
  2. 一套构建指令，它应用 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 来和大家演示。

2. 主动导入常见办法

在 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 啥的，须要咱们本人装置上，这个惯例操作我就不多说了。

2.1 传统写法

当初我举一个简略的例子，比如说在 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 我的项目的前端代码中，尽管也有导入，然而像下面这两个例子中导入都是没有的，那是怎么回事？

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

2.2 主动导入

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

  1. 装置插件：
npm i unplugin-auto-import -D

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

  1. 配置插件：

插件的配置是在我的项目根目录下的 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 中的办法都是不须要导入就能够应用了，其余组件中的办法则还是跟以前一样，必须导入之后才能够应用。

3. 组件去后缀

以前在 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 了吧。

4. name 属性问题

以前在 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
发表至： vue.js
2022-08-17
 0
关于vue.js:vue组件的生命周期
关于vue.js:用Blob下载文件流
vue技巧
关于vue.js:Vue模板语法

站内搜索

-「」