Several automatic loading skills of vue3.x

foreword

Recently, I have fiddled with Vue3 + Vite2 and encountered many problems. I have sorted out 5 small knowledge that can improve development efficiency and make your Vue3 project development smoother and smoother.

1. Setup name enhancement

Vue3's setup syntax sugar is a good thing, but the first problem with setup syntax is that it cannot be customized name , and we use keep-alive often requires a name. To solve this problem, it is usually solved by writing two script tags, one with setup , and one without, but this is bound to be not elegant enough. of.

 <script lang="ts">
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'OrderList'
})
</script>

<script lang="ts" setup>
onMounted(() => {
  console.log('mounted===')
})
</script>

At this time, with the help of the plug-in vite-plugin-vue-setup-extend , we can solve this problem more elegantly, without writing two script tags, which can be defined directly on the script tag name .

Install

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

configure

 // vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

use

 <script lang="ts" setup name="OrderList">
import { onMounted } from 'vue'

onMounted(() => {
  console.log('mounted===')
})
</script>

2. API automatic import

setup syntax lets us not need to put variables and methods one by one return can be used on the template when it goes out, which greatly liberates our hands.然而对于一些常用的VueAPI， ref 、 computed 、 watch等，还是每次都需要我们在页面上手动import .

We can implement automatic import through unplugin-auto-import , and we can use Vue's API in the file without import .

Install

 npm i unplugin-auto-import -D

configure

 // 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: t  ypeof import('vue')['isRef']
  // ...
}
export {}

use

 <script lang="ts" 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 etc.
Personally, it is recommended to only automatically import some familiar APIs. For example, we are familiar with vue APIs during development, and we can write them out with our eyes closed. For some less familiar libraries like VueUse, we still use import Better, after all, the editor has prompts, and it is not easy to make mistakes.

Solve the problem of eslint error

Using it without import will cause eslint to report an error, which can be solved by the following steps:

 // vite.config.ts
AutoImport({
    dts: 'types/auto-imports.d.ts',
    imports: ['vue'],
    // 解决eslint报错问题
    eslintrc: {
      enabled: true
    }
})

At this time, the .eslintrc-auto-import.json file will be automatically generated and imported into eslintrc.js .

 // eslintrc.js
module.exports = {
  extends: [
    './.eslintrc-auto-import.json'
  ]
}

3. Farewell.value

As we all know, ref requires us to add .value when accessing variables, which makes many developers feel uncomfortable.

 let count = ref(1)

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

Later, You Da also submitted a new ref syntactic sugar proposal.

 ref: count = 1

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

As soon as the proposal came out, it caused a discussion in the community. It has been a long time, and the topic of nonsense is no longer here.
What I introduce here is another way of writing, which is also a scheme released by the official later. Add --- ref before $ , this function is turned off by default and needs to be turned on manually.

 // vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

After opening, you can write:

 let count = $ref(1)

const addCount = () => {
  count++
}

The syntactic sugar is slightly different according to different version configurations. Below is the version of the relevant plugins I use:

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

This property is still experimental, use with caution! ! !

4. Automatically import pictures

In Vue2, we often refer to pictures like this:

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

But it is not supported in Vite require , and the reference image becomes the following:

 <template>
  <img :src="Logo" />
</template>

<script lang="ts" setup>
import Logo from '@/assets/image/logo.png'
</script>

Every time you use a picture, you have to import , which obviously delays everyone's time to fish. At this time, we can use vite-plugin-vue-images to automatically import pictures.

Shuangguishuang, but prone to variable conflict, use with caution!

Install

 npm i vite-plugin-vue-images -D

configure

 // vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'

export default defineConfig({
  plugins: [
    ViteImages({
      dirs: ['src/assets/image'] // 指明图片存放目录
    })
  ]
})

use

 <template>
  <!-- 直接使用 -->
  <img :src="Logo" />
</template>

<script lang="ts" setup>
// import Logo from '@/assets/image/logo.png'
</script>

5. Ignore the .vue suffix

I believe that many people ignore the .vue suffix of the import file when developing Vue2. But in Vite, ignoring the .vue suffix will cause an error.

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

According to You Da's answer, the need to write suffixes is actually deliberately designed in this way, which is to encourage everyone to write in this way.
But if you really don't want to write, the official also provides support.

 // vite.config.ts
import { defineConfig } from 'vite'

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

It should be noted here that manual configuration extensions remember to add the suffix of other types of files, because other types of files such as js can be imported by default ignoring the suffix. It becomes necessary to add a suffix.

PS: Although you can do this, after all, the official document says that it is not recommended to ignore the .vue suffix, so it is recommended that you honestly write .vue in actual development.

For more front-end knowledge, please pay attention to the applet, there will be surprises from time to time!