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