按需引入ant-design-vue组件

一、首先创建一个新的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);

总结,我们在项目中使用到第三方包的时候,都需要注意引入包的大小。按需引入是一个比较好的解决方案。

你可能感兴趣的:(研发,javascript,vue.js,前端)