老鳥請飛走,關於入手Ant 還是有比較長的路走的,但是呢,如果是有一套框架能讓我們快速開發項目成型,那么只需要先了解一下這個前端框架
那么官方的快速入門可以點這里
https://www.antdv.com/docs/vue/getting-started-cn/
但是呢,這可有不少坑,下面我們一一解決它吧。
這里說一下,我們需要具備一下知識
Vue 和 ES2015 , HTML、CSS 和 JavaScript 這些基本了解一下即可,總不能源代碼放哪里都不知道怎么理解?當然也是需要一點點基礎。
如果上面還是懵逼的,那先了解下比較好
好了,還是老樣子,我們需要准備的工具/安裝的東西有
1. Node.js 這個建議直接安裝最新版啦(應該是自帶npm的,不用獨立安裝)
2.安裝vue腳手架(命令行執行) 建議用 yarn的,npm的有可能報錯,有點坑。yarn的比較穩定
$ npm install -g @vue/cli #
OR
$ yarn global add @vue/cli
3.腦子一個即可
4.VSCode作為開發編輯器
好了上面如果安裝無誤之后
我們可以創建一個Ant項目了
找個空白的地方前面運行cmd

執行命令:vue create antd-demo(這個名字可以自定義)
我們看到這里有幾個選項

我就選擇vue3 preview吧。我們看到已經創建完成

這時候會多這么一個文件夾


然后還有一步,我們需要安裝ant組件
運行命令
npm i --save ant-design-vue
結果發現是報錯的,應該也有不少人這樣子,此時真想說****####¥¥%&%&*#%#%&%#&%#&%#&
算了,咋們是文化人
運行這個吧:yarn add ant-design-vue
以上執行完成之后。
我們用VS Code打開看看吧

我們看到這個結構是這個樣子的。。。其實這里還沒有引入ant的控件呢。我們搞一下
Vue就是按模板機制的,基礎東西不講。

我們把包引用好了
我們去官網找個控件代碼


運行瞧瞧yarn serve

我們發現報錯了

我們發現剛才這里選擇的是3.0X太新了,兼容性問題 重新來,這回選擇Vue2--記得按順序把命令執行一遍

我們又回來了

運行


結果發現還是報錯的,你說氣人不?沒關系,我們繼續研究應該是編譯不了模板

我們新建一個vue.config.js
加入

再次運行

已經能正常看到了,好了,就到這里!
