創(chuàng)建vue項(xiàng)目流程

1.使用構(gòu)建工具vue-cli創(chuàng)建項(xiàng)目腳手架

vue-cli是一個(gè)官方發(fā)布vue.js項(xiàng)目腳手架绽昏，使用vue-cli可以快速創(chuàng)建vue項(xiàng)目。
（1）安裝
確認(rèn)已安裝了node.js，可在cmd中輸入( node -v和npm -v），如顯示出版號(hào)误债，說明安裝成功蔬顾。

圖片.png

• 通過vue ui安裝
  第一步：在cmd中輸入vue ui
  
  圖片.png
  
  第二步：之后會(huì)彈出一個(gè)頁面隅居，點(diǎn)擊創(chuàng)建
  
  圖片.png
  
  第三步：選擇你項(xiàng)目要放的文件峡碉，然后點(diǎn)擊在此創(chuàng)建新項(xiàng)目
  
  圖片.png
  
  第四步：輸入項(xiàng)目名稱须揣，點(diǎn)擊下一步
  
  圖片.png
  
  第五步：選擇手動(dòng)盐股，點(diǎn)擊下一步
  
  圖片.png
  
  第六步：根據(jù)項(xiàng)目需要勾選，本項(xiàng)目勾選了以下幾個(gè)耻卡，勾選完后點(diǎn)擊下一步
  
  圖片.png
  
  
  圖片.png
  
  第七步：勾選router疯汁，本項(xiàng)目css選擇stylus，然后點(diǎn)擊創(chuàng)建項(xiàng)目
  
  圖片.png
  
  第八步：點(diǎn)擊創(chuàng)建項(xiàng)目不保存預(yù)設(shè)
  
  圖片.png
  
  第九步：耐心等待一段時(shí)間
  
  圖片.png
  
  第十步：安裝好后卵酪，進(jìn)入到項(xiàng)目目錄下幌蚊，輸入npm run serve運(yùn)行，若出現(xiàn)最后一張圖的頁面溃卡，說明安裝成功
  
  圖片.png
  
  
  圖片.png
  
  
  圖片.png
  
  
  圖片.png

2.項(xiàng)目目錄詳解及各文件規(guī)范

圖片.png

2.1.2 編寫格式

1.png

（2）頁面views
2.2.1如何在頁面中引用組件
v-bond(:）用于設(shè)置HTML屬性
v-on（@）用于綁定HTML事件

• 設(shè)置HTML屬性
  components中的文件（子組件）

  
  
  image.png

views中的文件（父組件）犹赖，對(duì)組件進(jìn)行掛載

image.png

• @設(shè)置HTML事件
  components中的文件（子組件）

  
  
  image.png

views中的文件（父組件）队他，對(duì)組件進(jìn)行掛載

image.png

2.2.2編寫格式

2019-07-28_195422.png

（3）路由router

（4）配置文件package.json介紹

圖片.png

3.項(xiàng)目所需知識(shí)

3.1 ES6語法基礎(chǔ)

http://es6.ruanyifeng.com/

3.1.1 let和const、字符串峻村、解構(gòu)賦值麸折、數(shù)組、函數(shù)
3.1.2 export default和export的使用方式

• 導(dǎo)入模塊：使用import模塊名稱from模塊標(biāo)識(shí)符（import表示路徑）
• 暴露成員方式：使用export default和export向外暴露成員（exfault default只允許向外暴露一次）
  
  圖片.png
  
  如何使用
  import+（常量/函數(shù)/文件/模塊）的方式導(dǎo)入粘昨，以便能夠進(jìn)行使用垢啼。
  export和export default均可用于導(dǎo)出常量、函數(shù)雾棺、文件膊夹、模塊等。
  export和export default的區(qū)別
  
  圖片.png

3.2 vue基礎(chǔ)

https://cn.vuejs.org/

3.3 css基礎(chǔ)

3.3.1 flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

定義：用來為盒裝模型提供最大的靈活性捌浩。
彈性布局：.box{ display:flex;}
webkit內(nèi)核的瀏覽器：.box{ display: -webkit-flex; display:flex;}

• 基本概念

  
  
  圖片.png
• 容器的屬性
  flex-direction(決定主軸的方向）
  【1】 主軸為水平方向放刨，起點(diǎn)在左端
  
  圖片.png
  
  
  圖片.png

【2】主軸為水平方向，起點(diǎn)在右端

圖片.png

圖片.png

【3】主軸為垂直方向尸饺，起點(diǎn)在上沿

圖片.png

圖片.png

【4】主軸為垂直方向进统，起點(diǎn)在下沿

圖片.png

圖片.png

flex-wrap(一條軸線拍不下進(jìn)行換行）

圖片.png

圖片.png

圖片.png

圖片.png

圖片.png

圖片.png

圖片.png

** flew-flow（flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式）**
** justify-content（項(xiàng)目在主軸上的對(duì)齊方式）**
【1】 左對(duì)齊

圖片.png

圖片.png

【2】 右對(duì)齊

圖片.png

圖片.png

圖片.png

圖片.png

圖片.png

圖片.png

align-items(交叉軸上如何對(duì)齊）
align-content（多根軸線的對(duì)齊方式）

3.3.2常用的幾個(gè)樣式
字體樣式：font-family（字體的名稱） font-weight(字體的粗細(xì)） font-size(字體的大兄摇）
字體和框：text-align（文字相對(duì)于框的位置） line-height(設(shè)置行高）
margin和padding:margin: 25px(上邊距） 50px(右邊距） 75px(下邊距) 100px(左邊距) auto(依賴于瀏覽器）; padding：25px(上邊距） 50px(右邊距） 75px(下邊距) 100px(左邊距)

圖片.png

4.項(xiàng)目開發(fā)

4.1 和UI打交道

前端自然少不了和UI打交道，UI常用的工具有PS和藍(lán)湖（https://lanhuapp.com/）

4.2 代碼管理工具git

4.2.1 教程：https://www.liaoxuefeng.com/wiki/896043488029600
4.2.2 常用命令：
遠(yuǎn)程拉取項(xiàng)目：git clone 地址
狀態(tài)：git status
添加：git add .
提交：git commit -m " "
推送：git push
查看遠(yuǎn)程倉庫：git remote -v
推到master上：git push origin master
創(chuàng)建新的分支(分支名：dev）：git checkout -b dev
新建分支合并到master：git checkout master git marge dev git push origin master
刪除分支：git branch -D dev
遠(yuǎn)程刪除分支：git push origin :dev
退回到上一個(gè)版本：git reset --hard head^
查看日志：git log 或者 git reflog

4.3 編輯器vscode的使用

4.3.1封裝代碼塊
在vscode的文件>首選項(xiàng)>用戶代碼片段

• 比如說要封裝vue代碼片段螟碎，輸入vue在vue.json進(jìn)行寫

  
  
  image.png

• 當(dāng)你新建vue文件眉菱，輸入vuem

  
  
  image.png

• 單擊回車

  
  
  image.png

4.3.2常用命令

4.4 狀態(tài)管理（vuex）的使用

官方文檔：https://vuex.vuejs.org/zh/
學(xué)習(xí)筆記：http://www.reibang.com/p/9c42da470943

4.4.1什么是vuex？

是vue配套的公共數(shù)據(jù)管理工具掉分，它可以把一些共享的數(shù)據(jù)俭缓，保存到vuex中，方便整個(gè)程序中的任何組件直接獲取或修改我們的公共數(shù)據(jù)酥郭。

圖片.png

4.4.2安裝vuex
npm install vuex --save
在一個(gè)模塊化的打包系統(tǒng)中华坦，必須顯式地通過Vue.use()來安裝Vuex：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

4.4.3.狀態(tài)管理核心
狀態(tài)管理有5個(gè)核心，分別是state不从、mutation惜姐、getter、action椿息、module
（1）state
簡(jiǎn)單的理解歹袁，可以把state想象成組件中的data，專門用來存儲(chǔ)數(shù)據(jù)的寝优。
如果在組件中条舔，想要訪問store中的數(shù)據(jù)，只能通過```this.$store.state.xxx來訪問
（2）mutation
負(fù)責(zé)修改state中的數(shù)據(jù)
如果要操作store中的state值乏矾，不推薦直接操作state中的數(shù)據(jù)逞刷，推薦通過調(diào)用mutations提供的方法來操作對(duì)應(yīng)的數(shù)據(jù)。mutation的作用如下圖：

圖片.png

（4）action
action和mutation有些類似夸浅，不同在于

• action提交是不能直接修改state中的狀態(tài)，而mutation是可以直接修改state中的狀態(tài)扔役。
• action是支持異步操作的帆喇，而mutation只能是同步操作。

（5）mudule
module解決了當(dāng)state復(fù)雜臃腫的時(shí)候亿胸，module可以將store分割成模塊坯钦，每個(gè)模塊擁有直接的state、mutation侈玄、action和getter婉刀。

4.4.4 在main.js文件中或者store.js配置如下：

圖片.png

圖片.png

1.如果在組件中，想要訪問store中的數(shù)據(jù)序仙，只能通過this.$store.state.xxx來訪問突颊。
或者如果組件想要調(diào)用mutations中的方法，只能使用this.$store.commit('方法名')

圖片.png

在counter.vue文件中

圖片.png

2.getters包裝數(shù)據(jù)

圖片.png

4.5 axios向后臺(tái)發(fā)送請(qǐng)求（get、post）

官方文檔：https://www.kancloud.cn/yunye/axios/234845
4.5.1 安裝axios
npm install axios

4.5.2 api.js文件用于向后臺(tái)發(fā)送請(qǐng)求
例：

4.6 router（路由）頁面跳轉(zhuǎn)

官方文檔：https://router.vuejs.org/zh/
4.6.1

4.6.2 router.js文件
例：

2.png

5.打包上線部署

項(xiàng)目開發(fā)完成后律秃，可以輸入npm run build來進(jìn)行打包工作（打包目的為了壓縮文件大信老稹）
然后會(huì)生成一個(gè)dist的文件夾，項(xiàng)目上線時(shí)棒动，只需要將dist文件夾放到服務(wù)器就行了糙申。
詳細(xì)可參考舞侯大神寫的：

http://www.reibang.com/p/8792560f1a24