«Это первый день моего участия в первом испытании обновлений 2022 года. Подробную информацию о мероприятии см.:Вызов первого обновления 2022 г.".

предисловие

Недавно я возился с Vue3 + Vite2 и столкнулся со многими проблемами, я разобрался с 5 небольшими знаниями, которые могут повысить эффективность разработки, сделав разработку вашего проекта Vue3 более плавной и гладкой.

1. Улучшение имени установки

Vue3изsetupСинтаксический сахар — это хорошо, но использованиеsetupПервая проблема, связанная с грамматикой, заключается в том, что ее нельзя настроить под себя.name, а мы используемkeep-aliveчасто требуетсяname, решение этой проблемы обычно заключается в написании двухscriptтеги для разрешения, используетсяsetup, один не используется, но это обязательно неэлегантно.

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

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

<script lang="ts" 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 lang="ts" setup name="OrderList">
import { onMounted } from 'vue'

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

2. Автоматический импорт API

setupСинтаксис избавляет нас от необходимости помещать переменные и методы один за другим.returnВы можете использовать его на шаблоне, когда выходите на улицу, что значительно освобождает наши руки. Однако для некоторых часто используемыхVueAPI, напримерref,computed,watchд., или нам нужно делать это вручную на странице каждый разimport.

мы можем пройтиunplugin-auto-importРеализуйте автоматический импорт без необходимостиimportМожет использоваться в файлеVueAPI.

Установить

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 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Ждать.

Лично рекомендуется автоматически импортировать только некоторые знакомые 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'
  ]
}

3. Прощай.значение

Как мы все знаем,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"

4. Автоматически импортировать изображения

существуетVue2Мы часто обращаемся к таким картинкам:

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

но вViteне поддерживается вrequire, эталонное изображение становится следующим:

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

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

Каждый раз, когда вы используете изображение, вы должныimportОчевидно, что у каждого пора касаться рыбы, то мы можем использовать помощьvite-plugin-vue-imagesдля автоматического импорта изображений.

Shuangguishuang, но склонный к переменным конфликтам, используйте с осторожностью!

Установить

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 lang="ts" setup>
// import Logo from '@/assets/image/logo.png'
</script>

5. Игнорируйте суффикс .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 честно.

благодарный

Это здесь.Спасибо за чтение!予人玫瑰，手有余香，别忘了动动手指поставить лайк❤️.

Если в этой статье есть какие-либо ошибки или недостатки, пожалуйста, исправьте их в комментариях!

предисловие

1. Улучшение имени установки

Установить

настроить

использовать

2. Автоматический импорт API

Установить

настроить

использовать

решитьeslintошибка

3. Прощай.значение

4. Автоматически импортировать изображения

Установить

настроить

использовать

5. Игнорируйте суффикс .vue

благодарный

решить`eslint`ошибка