Vue项目中的自动化导入：提升开发效率的策略与应用场景

destinying
570 阅读5分钟

自动导入API unplugin-auto-import

unplugin-auto-import 是一个现代的自动导入插件，能够自动导入Vue、React、Pinia、Vue Router、Lodash、Axios等库的API，减少手动导入的繁琐工作。主要功能包括：

  • 自动导入常用库的API，如Vue、vue-router、@vueuse/core等。
  • 支持自定义目录中的函数自动导入。
  • 为使用TypeScript的项目生成类型声明文件。
  • 生成ESLint配置文件，避免未定义变量错误。

注意：

在Vue2中，vue-router的使用方式与Vue3有所不同。Vue2中通常使用this.$router和this.$route来访问路由实例和当前路由信息。而unplugin-auto-import默认提供的useRouter和useRoute是Vue3中的组合式API。所以vue2不推荐使用，需升级到vue3

1.安装

通过npm或yarn安装unplugin-auto-import作为开发依赖。

npm install unplugin-auto-import -D
yarn add nplugin-auto-import -D

2.配置vue.config.js

在vue.config.js或vite.config.ts中配置插件

// vite.config.js // vue.config.js
import AutoImport from 'unplugin-auto-import/vite'
//import AutoImport from 'unplugin-auto-import/webpack'
​
export default {
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: 'auto-imports.d.ts',
      eslintrc: {
        enabled: true,
      },
    }),
  ],
}

3.使用

完成配置后，开发时无需在每个文件中引入vue的API，即可直接调用。

<script setup>
const name = ref("123");
</script>

自动导入组件unplugin-vue-components

要实现自动导入UI组件库到Vue 2项目中，可以使用unplugin-vue-components插件。以下是详细的步骤和配置方法：

1. 安装插件

首先，需要安装unplugin-vue-components插件。可以通过npm或yarn进行安装：

npm install unplugin-vue-components -D

或者

yarn add unplugin-vue-components -D

2. 配置插件

根据使用的构建工具（如Vite、Webpack等），需要在相应的配置文件中进行配置。

Vite 配置

如果使用Vite作为构建工具，需要在vite.config.js或vite.config.ts中进行配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
​
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        ElementPlusResolver(), // 如果使用Element Plus UI库
        // 其他UI库的解析器，例如AntDesignVueResolver
      ],
    }),
  ],
})

Webpack 配置

如果使用Webpack作为构建工具，需要在vue.config.js中进行配置：

导入ElementPlus

const { defineConfig } = require('@vue/cli-service')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
​
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [
          ElementPlusResolver(), // 如果使用Element Plus UI库
          // 其他UI库的解析器，例如AntDesignVueResolver
        ],
      }),
    ],
  },
})

导入ElementUi

const { defineConfig } = require('@vue/cli-service')
const Components = require('unplugin-vue-components/webpack')
const { ElementUiResolver  } = require('unplugin-vue-components/resolvers')
​
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [
          ElementUiResolver({
            importStyle: true, // 是否自动导入样式
          }),
        ],
      }),
    ],
  },
})

若出现以下问题 Components is not a function ，说明unplugin-vue-components 的版本可能会影响插件的使用方式

  • 版本小于 0.26.0：使用 ComponentsPlugin。
  • 版本大于等于 0.26.0：使用 ComponentsPlugin.default。

您可以检查 package.json 文件中的版本号，并根据版本号调整引入方式。例如，如果版本号为 0.26.0 或更高，应使用 ComponentsPlugin.default：

const ComponentsPlugin = require('unplugin-vue-components/webpack').default;
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
};

3. 使用UI组件

配置完成后，可以直接在Vue模板中使用UI组件，无需手动导入和注册。例如，使用ElementUi的ElButton组件：

<template>
  <div>
    <el-button type="primary">Primary Button</el-button>
  </div>
</template>

4. 支持的UI库

unplugin-vue-components插件支持多种UI库，包括但不限于：

  • Element Plus
  • ElementUi
  • Ant Design Vue
  • Vuetify
  • PrimeVue
  • Mint UI

对于这些UI库，插件提供了内置的解析器，可以直接使用。如果需要支持其他UI库，可以自定义解析器。

5. 自定义解析器

如果需要支持自定义的UI库，可以编写自定义解析器。例如，假设有一个名为@my-ui/components的UI库，可以这样配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        (componentName) => {
          return {
            name: componentName,
            from: '@my-ui/components',
          }
        },
      ],
    }),
  ],
})

自动导入模块 require.context()

require.context() 是webpack的一个API，可以实现模块的自动化导入。通过指定目录路径、是否检索子文件夹和匹配文件的正则表达式，可以自动导入指定目录下的所有模块。

使用方法：

  1. 使用require.context()函数获取上下文。
  2. 遍历上下文中的文件，自动导入模块。
const context = require.context(directory, useSubdirectories, regExp);

  • directory: 相对路径，表示需要搜索的目录。

  • useSubdirectories: 布尔值，是否搜索子目录。

  • regExp: 正则表达式，用于匹配文件名。

  • require.context 返回一个函数，该函数具有以下三个属性：

    • resolve: 接受一个参数 request，返回匹配文件相对于整个工程的相对路径。
    • keys: 返回一个数组，包含所有匹配成功的文件路径。
    • id: 执行环境的 ID。

1.自动导入 Vuex 模块

// src/store/modules/user.js
const state = {
  userInfo: {
    name: '123',
    email: ''
  }
};

const mutations = {
  SET_USER_INFO(state, payload) {
    state.userInfo = payload;
  }
};

const actions = {
  updateUserInfo({ commit }, payload) {
    commit('SET_USER_INFO', payload);
  }
};

const getters = {
  getUserInfo: state => state.userInfo
};

export default {
  namespaced: true, // 命名空间，避免不同模块之间的状态冲突
  state,
  mutations,
  actions,
  getters
};

//index.js导入
const requireModule = require.context(
  // 模块目录的相对路径
  './modules',
  // 是否查询其子目录
  true,
  // 匹配文件的正则表达式
  /.js$/
);

const modules = {};

requireModule.keys().forEach(fileName => {
  // 获取模块名
  const moduleName = fileName.replace(/(./|.js)/g, '');
  // 导入模块
  modules[moduleName] = requireModule(fileName).default;
});

const store = new Vuex.Store({
  modules,
  // 其他 Vuex 配置...
});

export default store;

//xxx.vue使用
<template>
  <div>
    <p>{{ userInfo.name }}</p>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("use", ["userInfo"]),  //第一个参数:与模块名对应（modules/user）。第二个参数为state
  },
};
</script>

2.自动导入路由模块

在 Vue 项目中，路由配置文件可能会分散在多个文件中。使用 require.context 可以简化路由的导入过程。

示例代码：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [];

const requireRoute = require.context(
  // 路由模块目录的相对路径
  './modules',
  // 是否查询其子目录
  true,
  // 匹配文件的正则表达式
  /.js$/
);

requireRoute.keys().forEach(fileName => {
  if (fileName === './index.js') return; // 跳过 index.js
  const routeModule = requireRoute(fileName).default;
  routes.push(...routeModule);
});

const router = new VueRouter({
  routes,
  mode: 'history',
});

export default router;

3.自动注册全局组件

在 Vue 项目中，如果需要注册大量全局组件，手动导入和注册每个组件会非常繁琐。使用 require.context 可以简化这一过程。

示例代码：

import Vue from 'vue';

const requireComponent = require.context(
  // 组件目录的相对路径
  './components',
  // 是否查询其子目录
  true,
  // 匹配文件的正则表达式
  /.vue$/
);

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.replace(/^./(.*).\w+$/, '$1');
  Vue.component(componentName, componentConfig.default || componentConfig);
});

4.自动导入 API 文件

在项目中，API 文件可能会分散在多个文件中。使用 require.context 可以简化 API 文件的导入过程。

示例代码：

const modulesApi = require.context(
  // API 文件目录的相对路径
  './api',
  // 是否查询其子目录
  true,
  // 匹配文件的正则表达式
  /.js$/
);

const api = {};

modulesApi.keys().forEach(key => {
  const newKey = key.replace(/(./|.js)/g, '');
  api[newKey] = modulesApi(key).default;
});

export default api;

自动导入全局样式变量

在Vue CLI4中，可以使用style-resources-loader插件实现自动化导入全局样式变量。主要功能包括：

  • 自动导入less文件、Sass、Stylus文件。

1.安装

  1. 首先，需要在项目中安装 style-resources-loader 插件。可以通过以下命令安装：

    vue add style-resources-loader
//若使用less，还需要安装以下
npm i less less-loader 
npm i style-resources-loader -D
npm i vue-cli-plugin-style-resources-loader -D

2. 配置 vue.config.js

// vue.config.js
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',// 指定预处理器为 less
      patterns: [
        path.resolve(__dirname, 'src/assets/less/variables.less'),// 指定全局样式文件路径
      ],
    },
  },
}

3.创建全局样式文件

在 src/assets/less/ 目录下创建一个 variables.less 文件，并定义全局样式变量。例如：

// src/assets/less/variables.less
@primary-color: #1890ff;
@sidebar-width: 200px;
@header-height: 60px;
@body-min-width: 1200px;

4.使用

<template>
  <div class="demo">
    这是一个示例组件
  </div>
</template>

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

<style lang="less">
.demo {
  color: @primary-color;
  width: @sidebar-width;
}
</style>

总结

通过上述方法，可以在Vue项目中实现各种自动化导入，提高开发效率，减少重复代码，使项目更加模块化和可维护。

avatar
文章
阅读
粉丝