之前没有做笔记的习惯,经历了年底的一波裁员,来到新公司好多东西都是从新接触,好记性不如烂笔头还是做个笔记吧。
新公司需要搭建一个项目,用vuecli搭建因为是4.1版本的项目结构和vuecli2x版本的有些不一样了,所以在使用antd配置按需加载的时候遇见了问题。
CLI的搭建步骤就不说了直接官网或者百度都是一大堆直接复制就行。
项目目录:
vue-cli项目目录这是4版本以上的CLI比2x版本的精简了好多只剩精华了,可以看见在根目录上少了.babelrc文件。
所以要配置antd在vue中的按需加载需要步骤:
npm install ant-design-vue --save
接着下载按需加载的包:
npm install --save babel-plugin-import
然后在babel.config.js文件立配置:
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", "style":'css' }
]
]
};
然后运行看下控制台报错不报错,要是报类似缺少.less文件的错误就还需要npm下载less和less-loader插件,antd需要。
配置好之后就万事大吉了,不需要在mian.js在全局引入antd了,直接在需要的组件里引入就行。
main.js:
main.js不需要再全局引入antd需要的组件中直接引入:
<template>
<div class="about">
<h1>This is an about page</h1>
<a-button type="primary">Primary</a-button>
</div>
</template>
<script>
import { Button
} from 'ant-design-vue';
export default {
components: { AButton: Button },
}
</script>
效果图:
网友评论