Ant Design Vue快速入門補充


老鳥請飛走,關於入手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

加入

module.exports = {
    runtimeCompiler: true
}

 

 

再次運行

 

 

 

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM