按需引入ant-design-vue组件
eslint是一个代码检测工具。用来规范编码规范用。按需引入是为了减少加载插件包的大小。
·
一、首先创建一个新的Vue项目
vue create xxx
选择default含有babel和eslint。或者自定义Manually select features。
babel是一个转码器,主要用于ES2015+ 代码转换为 JavaScript 向后兼容版本的代码
eslint是一个代码检测工具。用来规范编码规范用。
自定义可选的插件有,Babel,TypeScript,Progressive Web App (PWA) Support,Vuex,CSS Pre-precessors,Linter / Formatter ,Unit Testing 单元测试,E2E Testing 端到端测试
大家按需选择即可。
二、安装ant-design-vue
npm i ant-design-vue
三、配置vue.config.js以支持less
//自己创建vue.config.js文件。注意配置字段的大小写不要错
//自己创建vue.config.js文件。注意配置字段的大小写不要错
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
},
},
};
四、到ant-design-vue官网找到按需通过bable按需引入代码。
https://www.antdv.com/docs/vue/introduce-cn/
,不喜欢找的,直接复制我的配置。
//babel.config.js文件做如下配置。
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true },
], // `style: true` 会加载 less 文件
],
};
按需引入是为了减少加载插件包的大小。
安装好之后,还需要安装babel-plugin-import
//npm i --save-dev babel-plugin-import
//安装后在代码里要按需时候,如下使用Button就只导入Button
import { Button } from "ant-design-vue";
Vue.use(Button);
总结,我们在项目中使用到第三方包的时候,都需要注意引入包的大小。按需引入是一个比较好的解决方案。
更多推荐
已为社区贡献1条内容
所有评论(0)