前言：
本項(xiàng)目將會(huì)以商城為標(biāo)本星澳，通過vue實(shí)現(xiàn)單頁面程序。如果是剛涉及前端開發(fā)的旱易，涉及內(nèi)容會(huì)比較多禁偎，如ES6、sass咒唆、webpack等届垫，足夠搞暈?zāi)悴⒆屇惴艞墸凰员疚恼轮饕亲屇闳绾慰焖倮胿ue開發(fā)全释，涉及配置或原理性的東西不會(huì)涉及太多装处，有興趣的同學(xué)課后再慢慢去消化。
如果你是vue高手浸船，想要得到提升妄迁，本文并不會(huì)有太多幫助，請快速跳過李命！
“動(dòng)起來登淘，才能更好的繼續(xù)！”
一：前期準(zhǔn)備
// 安裝node.js
https://nodejs.org
我們主要是使用包管理器npm來對代碼進(jìn)行模塊化管理封字，這樣你就可以直接調(diào)用別人的包以及更新黔州；有點(diǎn)類似IOS里的cocoapods,java的maven。
查看是否安裝：打開終端輸入node -v及npm -v
由于qiang的原因阔籽，npm包下載很慢流妻，我們可以改成淘寶的源。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org以后就可以用cnpm來替代npm執(zhí)行各種指令笆制，各種指令后續(xù)會(huì)介紹绅这。
二：webpack介紹
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)在辆，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)证薇，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle匆篓。
常用的功能包括sass預(yù)編譯浑度、熱替換、打包鸦概、壓縮箩张、測試發(fā)布環(huán)境等等。內(nèi)容較多，這里就不做太多介紹伏钠，后續(xù)用vue腳手架可自動(dòng)完成横漏，有興趣可以到官網(wǎng)了解了解。https://doc.webpack-china.org/concepts/
// 全局安裝
npm install -g webpack
三：vue腳手架
vue-cli是vue提供構(gòu)建單頁應(yīng)用的腳手架熟掂，它能夠幫助開發(fā)者快速的創(chuàng)建vue項(xiàng)目缎浇。當(dāng)然你也可以自己搭，麻煩點(diǎn)在于webpack的配置上(當(dāng)然webpack不是必須赴肚，只是會(huì)提高我們開發(fā)效率）素跺。
// 安裝
npm install -g vue-cli 當(dāng)然也可以使用cnpm install -g vue-cli
// 創(chuàng)建項(xiàng)目
vue init webpack Demo根據(jù)提示一步步完成即可
// cd進(jìn)入文件夾目錄
cd Demo
// npm 初始化
npm install
// 啟動(dòng)(執(zhí)行指令需要通過run，dev是在package.json中scripts里定義的誉券，用來搭建一個(gè)localHost:8080指厌，可通過瀏覽器訪問）
npm run dev
效果如下：
四：安裝Vue Devtools
Vue Devtools用于調(diào)試過程中，跟蹤查看各種數(shù)據(jù)踊跟。
chrome安裝 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
沒辦法科學(xué)上網(wǎng)的：參考https://github.com/vuejs/vue-devtools
五：項(xiàng)目結(jié)構(gòu)
我們只需要修改src文件夾及static踩验。
src：工程目錄
- api放置向服務(wù)器請求的接口
- assets就放置自己寫的及組件的資源。
- components就是自定義vue組件商玫，如header.vue箕憾，footer.vue等
- pages就是每個(gè)頁面內(nèi)容
- router是路有選擇器，主要是用來指導(dǎo)跳轉(zhuǎn)拳昌，如http://localhost:8080/home顯示主頁面http://localhost:8080/login顯示登錄頁等
- store是Vuex的文件袭异，這部分就是vue數(shù)據(jù)交互的核心，詳細(xì)參考： https://vuex.vuejs.org/zh-cn/
- App.vue是頁面入口炬藤，通過核心語句<router-view/>配置路由入口進(jìn)行跳轉(zhuǎn)御铃。
- main.js用來創(chuàng)建全局Vue對象
static一般放置的是非組件的、第三方的js沈矿、css等資源上真。
其它文件咱們先不管～
調(diào)試相關(guān)
這個(gè)寫在這里是因?yàn)槲野l(fā)現(xiàn)用Vue Devtools并不能很好的debug，特別是涉及數(shù)據(jù)流跟蹤操作顯得蒼白無力细睡。折騰了很久發(fā)現(xiàn)webpack的強(qiáng)大之處谷羞。
ctrl(command) + p然后輸入要打斷點(diǎn)的文件帝火，愉快的斷點(diǎn)吧....
總結(jié)：
至此溜徙，我們已經(jīng)能夠通過vue-cli搭建項(xiàng)目，了解了相關(guān)調(diào)試技巧犀填，并讓項(xiàng)目跑起來蠢壹。此章節(jié)任務(wù)完成，下一章節(jié)我將介紹如何一步步修改文件九巡，最終達(dá)到我們要的效果图贸！
GIT地址： HEAD ->sectionOne
git@github.com:Monk428/vue-mall.git
