引入组件的三种方式
组件的引入方式全局引入// main.jsimport Ant from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'Vue.use(Ant)全局引入方式, 会将 ant 整个依赖模块全部加载进来。导致文件体积过大,不建议。按需导入// main.jsimport Button from 'ant-design-vue/lib/butt
组件的引入方式
全局引入
// 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'
更多推荐
所有评论(0)