老鳥請飛走,關於入手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
加入
再次運行
已經能正常看到了,好了,就到這里!