美文网首页
vue-cli4/antd 配置按需加载

vue-cli4/antd 配置按需加载

作者: 豆屁屁 | 来源:发表于2020-01-19 15:47 被阅读0次

    之前没有做笔记的习惯,经历了年底的一波裁员,来到新公司好多东西都是从新接触,好记性不如烂笔头还是做个笔记吧。

    新公司需要搭建一个项目,用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>

    效果图:

    相关文章

      网友评论

          本文标题:vue-cli4/antd 配置按需加载

          本文链接:https://www.haomeiwen.com/subject/jxzmhxtx.html