vue：基础项目搭建

全局安装 vue ，然后 vue creact xxx 构建完脚手架。项目开始。

 

一、安装 antd 的 vue 版本

 

    npm install ant-design-vue --save

 

二、全局引入并注册

 

    // antd UI 全局引入

    import Antd from 'ant-design-vue'

    import 'ant-design-vue/dist/antd.css’

 

    // 使用 vue 的全局插件

    Vue.use(Antd)

 

三、按需加载 

 

    ant-design-vue 使用 babel-plugin-import 进行按需加载。如果全局引入不需要这个。

 

        1､安装babel-plugin-import插件

 

npm i babel-plugin-import --save-dev

2､修改.babelrc文件，在plugins节点下，添加下面这个配置项：

 

"plugins": ["transform-vue-jsx", "transform-runtime",    

    [

"import",

        {

            "libraryName": "ant-design-vue",

            "libraryDirectory": "lib",

            "style": "css"             

        }

    ]

]

 

          2､在需要使用相关组件的页面引入并注册即可按需加载：

 

<template>

<div>

<a-button type="primary">hello world</a-button>

</div>

</template>

 

<script>

import { Button } from 'ant-design-vue';

 

export default {

    components:{ AButton:Button },

}

</script>

 

          在这里遇到一个问题：.babelrc 文件在哪里？安装了 npm 也没找到？

 

        报错如下图：

                

 

                原因在于：vue-cli 的 2.0 版本和 3.0 版本有区别。在官方文档中有解释。（官方文档：https://vue.ant.design/docs/vue/use-with-vue-cli-cn/）

 

              

 

四、运行项目：npm run serve