引入组件的三种方式

最新推荐文章于 2024-09-12 10:51:36 发布

原创最新推荐文章于 2024-09-12 10:51:36 发布 · 4.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #es6

项目学习专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在Vue项目中引入Ant Design Vue组件库的三种方法：全局引入、按需导入以及使用babel-plugin-import插件实现按需加载，对比了各种方法的优缺点，并提供了错误处理和组件引入优化策略。

组件的引入方式

全局引入

// main.js
import Ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Ant)

全局引入方式，会将 ant 整个依赖模块全部加载进来。导致文件体积过大，不建议。

按需导入

// main.js
import Button from 'ant-design-vue/lib/button'
import 'ant-design-vue/lib/button/style'

Vue.use(Button)

按需导入方式，只会将需要的组件和对应的样式加载进来，虽然减少了文件体积，但如果需要引入许多组件就要写多行。效率抵下。

使用 babel-plugin-import 实现按需加载

下载依赖包

yarn add babel-plugin-import

或

npm install babel-plugin-import --save

babel.config.js 文件配置

 plugins: [
    ["import", {
      "libraryName": "ant-design-vue",
      "libraryDirectory": "es",
      "style": true   // 实现模块 less 样式的按需自动加载
    }]
  ]

在 main.js 文件中按需引入组件

import { Button } from 'ant-design-vue'

// 相当于
var _button = require('ant-design-vue/lib/button')
require('ant-design-vue/lib/button/style/index.less')

Vue.use(Button)

注意：使用插件实现按需加载，在引入组件时不需要引入样式文件，因为插件会自动引入，这样就提高了书写效率。建议使用该方法。

问题

Module build failed (from ./node_modules/_less-loader@6.2.0@less-loader/dist/cjs.js)

解决方法：

报错时所用的 less-loader 版本为 6.2.0；把版本降到 5.0.0 即可。具体原因不清楚，可能是版本不兼容吧。

把组件引入分离到一个文件

组件是在 main.js 文件中引入的，如果有许多组件，main.js 文件看起来就很乱。为了解决这个问题，可以采用把组件的引入分离到一个文件中去，再导入到 main.js 中即可。

在 core/component.js 文件中引入需要的组件

// core/component.js
import Vue from 'vue'
import { Button } from 'ant-design-vue'

Vue.use(Button)

在 main.js 文件中引入 core/component.js 文件

import './core/component'