1 Vue項目環境準備
(1)下載下傳按安裝Node.js運作環境,node-v 用來檢查已安裝node版本
npm為一個包管理工具 npm-v檢查npm版本号(包含一些代碼開發效率、版本控制)
(2)注冊碼雲賬号(網上git雲倉庫)
(3)在本地安裝git,git --version檢查是否安裝成功
windows系統 git bash 執行SSH keygen
郵箱填寫自己的郵箱
git clone把線上代碼放到本地
(4)大型webpack建構項目 vue-cli
vue-cli 是用node編寫的指令行工具,需要進行全局安裝
$npm install --global vue-cli
可以使用vue-cli快速生成一個基于Webpack建構的項目
$vue init webpack my-project
執行指令後,會有一些指令互動,初始化一些項目資訊
進入my-project目錄,安裝項目的依賴
$npm install
此時,看一下項目目錄結構
啟動項目
$npm run dev
打開浏覽器,通路上述頁面,
(5)把本地代碼推到線上(保證本地和線上代碼一緻)
$git add .
$git commit -m 'project change'
$git push
在實際項目開發中,不僅有簡單檔案(主分支master)的push 和pull操作。更多的是每一次開發新的元件時,要生成新的分支,便于代碼調試,代碼管理。
(6)實際開發中,需要不斷建立新的分支,每次建立新的分支,都要進行如下指令操作
$git pull
$git checkout index-ajax
在每一次分支的元件開發完畢,都要先把本地新的分支代碼推到線上,最後再把分支元件合并到主分支。
$git add .
$git commit -m 'add recs'
$git push
add recs即為添加新元件的内容到線上
第二步,切換到主分支,然後把新分支的内容合并到主分支
$git checkout master
$git merge origin/index-rec
$git push
index-rec為建立分支的名字
2 Vue中ajax請求
Vue中發送ajax請求,一般有兩種方法
fetch | vue-resource |
Vue官方推薦 axios 這個第三方子產品(能很好的處理跨平台資料請求)
安裝 axios
npm install axiios --save
沒有背景伺服器支援。資料檔案可先儲存在static檔案下,建立一個檔案夾然後放置json檔案。
父子元件的資料傳遞 props