内置功能

「天下武功，唯快不破」。只有快速完成需求，才有时间去学习更多、或在关键点上作一些优化。因此，脚手架为开发者内置了一些方便快捷的功能，解放开发者的双手，不用手动 import 组件，Vue hooks 等。基于构建工具 webpack 或者 vite，集成了一些常用的插件。

自动导入自定义的组件

直接在 template 写组件名即可，插件会帮你引入进来。注意别重名。借助 unplugin-vue-components 来实现，该插件支持 Vue2 和 Vue3。

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-components/webpack')({ /* options */ }),
    ],
  },
}

Vite

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({}),
  ],
});

插件会生成一个自己组件路径的 components.d.ts 文件，具体可看这个 vue3 的issue types(defineComponent): support for expose component types

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/vue-next/pull/3399

declare module 'vue' {
  export interface GlobalComponents {
    NetworkBroken: typeof import('./src/components/NetworkBroken/index.vue')['default']
    SendCode: typeof import('./src/components/SendCode/index.vue')['default']
    SvgIcon: typeof import('./src/components/global/SvgIcon/index.vue')['default']
  }
}

export { }

用法示例

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

自动转换成如下：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

插件默认配置

Components({
  // relative paths to the directory to search for components.
  dirs: ['src/components'],

  // valid file extensions for components.
  extensions: ['vue'],
  // search for subdirectories
  deep: true,
  // resolvers for custom components
  resolvers: [],

  // generate `components.d.ts` global declarations, 
  // also accepts a path for custom filename
  dts: false,

  // Allow subdirectories as namespace prefix for components.
  directoryAsNamespace: false,
  // Subdirectory paths for ignoring namespace prefixes
  // works when `directoryAsNamespace: true`
  globalNamespaces: [],

  // auto import for directives
  // default: `true` for Vue 3, `false` for Vue 2
  // Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
  // To install Babel, run: `npm install -D @babel/parser @babel/traverse`
  directives: true,

  // filters for transforming targets
  include: [/\.vue$/, /\.vue\?vue/],
  exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
})

提示

unplugin-vue-components 用于常用的 UI 组件库的时候，比如 element-ui, vant 等，

• unplugin-vue-components 只支持模板上的引用，因此，挂载在 Vue.prototype 上的属性和方法及指令，在使用的时候都得手动进行挂载。

Vue3

setup name 增强

在使用 Vue3 作为基础框架的时候，非常推荐大家使用更为快捷的 setup 写法。只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。 但在使用的时候，存在一个不方便的地方，即无法自定义 name。我们在使用 keep-alive 是需要 name 的。而解决这个问题通常是，需要通过写两个 script 标签来解决，一个使用 setup，一个使用 defineComponent，但这样不够优雅。如下：

<script>
import { defineComponent } from 'vue';

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

<script setup>
// ...
</script>

可以借助 unplugin-vue-setup-extend 来实现。

VueCLI

module.exports = {
  configureWebpack: {
    plugins: [
      require('@winner-fed/unplugin-vue-setup-extend/webpack').default({ /* options */ }),
    ],
  },
}

Vite

// vite.config.js
import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from '@winner-fed/unplugin-vue-setup-extend'

export default defineConfig({
  plugins: [vue(), vueSetupExtend()],
})

使用方式

<template>
  <div>hello world {{ a }}</div>
</template>

<script lang="ts" setup name="App">
  const a = 1
</script>

API（ref，reactive，toRefs 等） 自动导入

setup 语法让我们不用再一个一个的把变量和方法都 return 出去，就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的组合式 API，比如 ref、toRefs、reactive、watch等，还是每次都需要我们在页面上手动进行import。 我们可以通过 unplugin-auto-import 实现自动导入，无需 import 即可在文件里使用。

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({ /* options */ }),
    ],
  },
}

Vite

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})

注意

• 根目录下的 auto-imports.d.ts 文件是自动生成的。
• 在没有 import 的情况下使用会导致 eslint 提示报错，脚手架已经通过在 eslintrc.js 安装插件 vue-global-api 解决了这个问题