高防服务器

如何让Vue3开发更顺畅


如何让Vue3开发更顺畅

发布时间:2022-02-19 17:46:33 来源:高防服务器网 阅读:58 作者:iii 栏目:编程语言

这篇文章主要介绍“如何让Vue3开发更顺畅”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何让Vue3开发更顺畅”文章能帮助大家解决问题。

一、setup name 增强

Vue3的setup语法糖是个好东西,但使用setup语法带来的第一个问题就是无法自定义name,而我们使用keep-alive往往是需要name的,解决这个问题通常是通过写两个script标签来解决,一个使用setup,一个不使用,但这样必然是不够优雅的。

<script>  import { defineComponent, onMounted } from 'vue'  export default defineComponent({    name: 'OrderList'  })  </script>  <script setup>  onMounted(() => {    console.log('mounted===')  })  </script>

这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题,不用写两个script标签,可以直接在script标签上定义name。

安装

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

配置

// vite.config.ts  import { defineConfig } from 'vite'  import VueSetupExtend from 'vite-plugin-vue-setup-extend'  export default defineConfig({    plugins: [      VueSetupExtend()    ]  })

使用

<script setup name="OrderList">  import { onMounted } from 'vue'  onMounted(() => {    console.log('mounted===')  })  </script>

二、API 自动导入

setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用,大大的解放了我们的双手。然而对于一些常用的VueAPI,比如ref、computed、watch等,还是每次都需要我们在页面上手动进行import。

我们可以通过unplugin-auto-import实现自动导入,无需import即可在文件里使用Vue的API。

安装

npm i unplugin-auto-import -D

配置

// vite.config.ts  import { defineConfig } from 'vite'  import AutoImport from 'unplugin-auto-import/vite'  export default defineConfig({    plugins: [      AutoImport({         // 可以自定义文件生成的位置,默认是根目录下,使用ts的建议放src目录下        dts: 'src/auto-imports.d.ts',        imports: ['vue']      })    ]  })

安装配置完会自动生成auto-imports.d.ts文件。

// auto-imports.d.ts  // Generated by 'unplugin-auto-import'  // We suggest you to commit this file into source control  declare global {    const computed: typeof import('vue')['computed']    const createApp: typeof import('vue')['createApp']    const customRef: typeof import('vue')['customRef']    const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']    const defineComponent: typeof import('vue')['defineComponent']    const effectScope: typeof import('vue')['effectScope']    const EffectScope: typeof import('vue')['EffectScope']    const getCurrentInstance: typeof import('vue')['getCurrentInstance']    const getCurrentScope: typeof import('vue')['getCurrentScope']    const h: typeof import('vue')['h']    const inject: typeof import('vue')['inject']    const isReadonly: typeof import('vue')['isReadonly']    const isRef: typeof import('vue')['isRef']    // ...  }  export {}

使用

<script setup name="OrderList">  // 不用import,直接使用ref  const count = ref(0)  onMounted(() => {    console.log('mounted===')  })  </script>

上面我们在vite.config.ts的配置里只导入了vue,imports: ['vue'],除了vue的你也可以根据文档导入其他的如vue-router、vue-use等。

个人建议只对一些比较熟悉的API做自动导入,如vue的API我们在开发时都比较熟悉,闭着眼都能写出来,对于一些不大熟悉的像VueUse这种库,还是使用import更好一些,毕竟编辑器都有提示,不易写错。

解决eslint报错问题

在没有import的情况下使用会导致eslint提示报错,可以通过在eslintrc.js安装插件**vue-global-api**解决。

// 安装依赖  npm i vue-global-api -D  // eslintrc.js  module.exports = {    extends: [      'vue-global-api'    ]  }

三、告别.value

众所周知,ref要求我们访问变量时需要加上.value,这让很多开发者觉得难受.

let count = ref(1)  const addCount = () => {    count.value += 1  }

后来尤大大也提交了一份新的ref语法糖提案。

ref: count = 1  const addCount = () => {    count += 1  }

该提案一出便引起了社区的一片讨论,时间已经过去很久了,这里就不再废话这个话题了。

这里我介绍的是另外一种写法,也是官方后来出的一种方案,在ref前加上$,该功能默认关闭,需要手动开启。

// vite.config.ts  import { defineConfig } from 'vite'  import vue from '@vitejs/plugin-vue'  export default defineConfig({    plugins: [      vue({        refTransform: true // 开启ref转换      })    ]  })

开启之后可以这样写:

let count = $ref(1)  const addCount = () => {    count++  }

该语法糖根据不同的版本配置也略有不同,下面贴一下我自己所用相关插件的版本:

"vue": "^3.2.2",  "@vitejs/plugin-vue": "^1.9.0",  "@vue/compiler-sfc": "^3.2.5",  "vite": "^2.6.13"

四、自动导入图片

在Vue2时我们经常会这样引用图片:

<img :src="require('@/assets/image/logo.png')" />

但在Vite中不支持require了,引用图片变成了下面这样:

<template>    <img :src="Logo" />  </template>  <script setup>  import Logo from '@/assets/image/logo.png'  </script>

每次使用图片都得import,显然耽误了大家摸鱼的时间,这时我们可以借助vite-plugin-vue-images来实现自动导入图片。

爽归爽,但容易发生变量冲突,慎用!

安装

npm i vite-plugin-vue-images -D

配置

// vite.config.ts  import { defineConfig } from 'vite'  import ViteImages from 'vite-plugin-vue-images'  export default defineConfig({    plugins: [      ViteImages({        dirs: ['src/assets/image'] // 指明图片存放目录      })    ]  })

使用

<template>    <!-- 直接使用 -->    <img :src="Logo" />  </template>  <script setup>  // import Logo from '@/assets/image/logo.png'  </script>

五、忽略.vue后缀

相信很多人在Vue2开发时,导入文件都是忽略.vue后缀的。但在Vite里,忽略.vue后缀会引起报错。

import Home from '@/views/home' // error  import Home from '@/views/home.vue' // ok

根据尤大大的回答,必须写后缀其实是故意这么设计的,也就是提倡大家这么去写。

但如果你真的不想写,官方也是提供了支持的。

// vite.config.ts  import { defineConfig } from 'vite'  export default defineConfig({    resolve: {      extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']    }  })

这里要注意,手动配置extensions要记得把其他类型的文件后缀也加上,因为其他类型如js等文件默认是可以忽略后缀导入的,不写上的话其他类型文件的导入就变成需要加后缀了。

虽然可以这么做,不过毕竟官方文档说了不建议忽略.vue后缀,所以建议大家在实际开发中还是老老实实写上.vue。

关于“如何让Vue3开发更顺畅”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注高防服务器网行业资讯频道,小编每天都会为大家更新不同的知识点。

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[