天天看點

Vue項目環境準備以及常用git指令

1 Vue項目環境準備

(1)下載下傳按安裝Node.js運作環境,node-v 用來檢查已安裝node版本

npm為一個包管理工具 npm-v檢查npm版本号(包含一些代碼開發效率、版本控制)

(2)注冊碼雲賬号(網上git雲倉庫)

(3)在本地安裝git,git --version檢查是否安裝成功

windows系統 git bash 執行SSH keygen

Vue項目環境準備以及常用git指令
Vue項目環境準備以及常用git指令

郵箱填寫自己的郵箱

git clone把線上代碼放到本地

Vue項目環境準備以及常用git指令

(4)大型webpack建構項目  vue-cli

vue-cli 是用node編寫的指令行工具,需要進行全局安裝

$npm install --global vue-cli
           

可以使用vue-cli快速生成一個基于Webpack建構的項目

$vue init webpack my-project
           
Vue項目環境準備以及常用git指令

執行指令後,會有一些指令互動,初始化一些項目資訊

進入my-project目錄,安裝項目的依賴

$npm install
           

此時,看一下項目目錄結構

Vue項目環境準備以及常用git指令

啟動項目

$npm run dev
           
Vue項目環境準備以及常用git指令

打開浏覽器,通路上述頁面,

Vue項目環境準備以及常用git指令

(5)把本地代碼推到線上(保證本地和線上代碼一緻)

$git add .
$git commit -m 'project change'
$git push
           

在實際項目開發中,不僅有簡單檔案(主分支master)的push 和pull操作。更多的是每一次開發新的元件時,要生成新的分支,便于代碼調試,代碼管理。

(6)實際開發中,需要不斷建立新的分支,每次建立新的分支,都要進行如下指令操作

$git pull
$git checkout index-ajax
           
Vue項目環境準備以及常用git指令

在每一次分支的元件開發完畢,都要先把本地新的分支代碼推到線上,最後再把分支元件合并到主分支。

$git add .
$git commit -m 'add recs'
$git push
           
Vue項目環境準備以及常用git指令

add recs即為添加新元件的内容到線上

第二步,切換到主分支,然後把新分支的内容合并到主分支

$git checkout master
$git merge origin/index-rec
$git push
           

index-rec為建立分支的名字

Vue項目環境準備以及常用git指令

2 Vue中ajax請求

Vue中發送ajax請求,一般有兩種方法

fetch vue-resource

Vue官方推薦 axios 這個第三方子產品(能很好的處理跨平台資料請求)

安裝 axios

npm install axiios --save
           

沒有背景伺服器支援。資料檔案可先儲存在static檔案下,建立一個檔案夾然後放置json檔案。

父子元件的資料傳遞  props

Vue項目環境準備以及常用git指令

繼續閱讀