vue項目之啓動項目
前言：
vue的基本知識 重點講述《vue.js從入門到項目實戰》的第一章到第四章
vue項目化 重點講述《vue.js從入門到項目實戰》的第六章
接下來就是對第八章的啓動了。
文章目錄
一、理論內容
打造一個線上商城。首頁、詳情頁、購物車、訂單四個頁面。購物車和訂單頁面的動態就沒展示了。
頁面設計
首頁設計：頂部banner有搜索框、購物車和訂單的跳轉鏈接等，是各個頁面所共有的；中部banner有導航；底部有幾件商品的超鏈接；
詳情頁設計：左側banner是商品的詳情圖、右側banner是商品的購物；
購物車設計：表格設置商品；
訂單設計：和購物車設計類似，表格設置訂單；
目錄結構設計
初始目錄
build：開發和生產版本的構建腳本；
config：開發和生產版本的部分構建配置；
dist：由npm run build生成；項目的生產版本，只有HTML、CSS、JavaScript和靜態資源；
src：項目開發的關鍵資源目錄和主要工作空間；
.gitignore：應該被git版本控制工具忽略的文件；
index.html：應該被webpack注入資源的模板HTML文件；
src目錄結構
asset：存放樣式表和圖片；
components：存放vue的單文件模板。目錄下的index.vue、Goods.vue、Cart.vue、Order.vue分別對應首頁、購物頁、購物車、訂單；
config：存放配置項，如商品信息及商品細分類目的導航；
router：路由；
widgets：存放自定義組件，自定義了複選框和跑馬燈；
App.vue：項目的根目錄
main.js：webpack的入口文件，在這裏引入全局資源，如CSS、js等和聲明全局變量。
webpack介紹
webpack是一個模塊打包器，可以將項目中所有資源打包整合注入到指定位置。在這個項目中是通過main.js引入，然後打包到dist文件夾中。在vue CIL構建的項目中，build目錄下存放着webpack的配置文件。
Font Awesome介紹
一套不錯的圖標庫，提供幾百個圖標並且用法簡單，滿足日常開發需求。
方法一：CDN
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
方法二：cnpm
cnpm install font-awesome --save-dev
之後再main.js中全局引入依賴。
動態資源配置
在src/config/config.js中模擬商品信息；
在src/components/index.vue組件中引入並渲染出來；
把這些信息在config.js中配置的好處是這些信息不僅能在index.vue中使用，也可以在Goods.vue中使用。並且修改的時候只需修改一處。
動態資源構建
用npm run build來構建項目的生產版本。之後再項目根目錄中會出現一個dist文件目錄。
vue CLI無法檢索路徑的字符串，這時可以把靜態資源放在src同級的static目錄下。當vue CLI構建生產版本時，該目錄下的東西就會被注入dist/static中。
動態資源存儲
使用window.localStorage來存儲數據。
window.localStorag來接收對象類型的數據值，所以在讀取和寫入時，我們需要用到瀏覽器內置對象JSON。
自定義組件
封裝兩個組件：首頁幻燈片、購物車頁面的複選框；
二、啓動線上商城
一個人從頭敲代碼到項目建成，會學得很全面。不過我暫時只做初步瞭解，能理解原理以及會修改即可。
首先用cmd進入項目的文件夾；然後安裝項目依賴cnpm install；接着啓動項目npm start；最後在瀏覽器中打開http://localhost:8080
果然成功了。
三、啓動企業網站
發現啓動這麼方便，於是乾脆把剩下幾個也一一嘗試。
理論
響應式設計：
Ethan marcotte在2010年5月提出的概念，指的是網頁在不同尺寸和設備上可響應式地顯示，達到once write，run everywhere的效果。最初的響應式設計用於CSS3中，通過媒體查詢media query判斷設備類型，進而對不同設備設置相應的樣式表。在實際開發過程中，也會使用js對設備類型進行補充判斷。
頁面開發-頁面切換與滑動：
企業官網大都採用一種佈局方式——“頂部導航欄+內容欄”。用戶可以通過頂部導航欄輕鬆切換頁面；
許多網站也習慣把多個內容區從上到下組合成一個長頁面，通過滑動滾動條來切換瀏覽器視窗的位置。還有就是用swiper的組件將頁面設置爲單屏，並以幻燈片翻頁的方式來切換視圖。本項目就是採用這種。
swiper的代碼可以在GitHub上下載好，然後通過靜態腳本方式引用和使用它們。
<link rel="stylesheet" href="path/to/swiper.min.css"
也可以利用npm來安裝swiper。然後在相關組件引入和使用它。
cnpm install swiper --save-dev
劃分內容區
頂層header有logo和中英文切換，是固定不變的。共有四個內容區（首頁、三個展示內容頁）
首頁一般設計一個具有衝擊力的特效。展示內容頁看頁面需要什麼。
中英文語種切換
把幻燈片內的信息提取出來，vue的插值綁定可以設置佔位符，選擇不同語言，網站就要不同的語言展示。首先是把所有信息都納入配置，然後將配置導入組件並綁定到視圖模板上。
啓動
指令如下：
C:\Users\Administrator>cd c:/
c:\>cd C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\RentCar
C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\RentCar>cnpm install
C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\RentCar>npm start
然後成功啓動。
四、啓動掌上新聞
資訊類應用
理論
應用首屏：新增GIF圖作爲啓動動畫，使首屏有一個炫酷的動畫。
應用首頁：搜索欄、tab選項卡和新聞列表三部分。新聞類別用v-for指令獲取數據生成；
新聞詳情：新聞的DOM結構都是定製的，但只需要v-html指令將新聞的DOM結構數據表現出來就可以了。
搜索頁面：歷史記錄、猜你想搜的。用window.localStorage來保存用戶曾輸入過的關鍵字。
搜索結果：和首頁類似，但未加入Tab選項卡。
項目構建
這個項目模擬了完整的前後臺交互流程，新增了data、store、ajax目錄。
data目錄充當數據庫的角色，裏面存儲着應用所有動態數據。category.json保存着新聞的分類數據；List.json保存着新聞的簡介數據；News.json保存着新聞的DOM數據結構；
ajax目錄負責完成與後臺接口的對接，並將數據導流到Vuex全局狀態管理器。
store目錄存儲項目的全局狀態管理器。
啓動
和前面一樣，成功啓動了。但是Chrome瀏覽器卻顯示“請在手機端上訪問”
方法一：F12，然後點擊左上角，顯示手機瀏覽。
結果：不行。
然後刷新一下，可行。
剛剛我差點就想用手機模擬器試一試了，還好谷歌可以模擬。
差一點就去試一試了。這個掌上新聞還挺好的。比前兩個更有參考價值。
五、啓動SVG畫圖板
工具類網站
理論
SVG是可伸縮矢量圖形，一種基於XML的圖片格式，尺寸放大或縮小圖片質量不損失，並且可以將SVG元素作爲DOM元素處理。
基本圖形的使用
用
SVG中的漸變
用Linear Gradient和Radial Gradient。
頁面設計
頂部放logo；左側爲工具類；右側爲菜單欄；中間是畫板；
啓動
按之前的操作啓動。
成功啓動
六、總結
熟悉vue項目的啓動後，其他vue項目也終於會引用了。
在第一個項目中：線上商城學習到了webpack和font awesome；
在第二個項目中：企業網站學習到了響應式、swiper.js、雙語切換；
在第三個項目中：掌上新聞學習到了前後臺交互流程；這一部分很有意思，可以擴展學習後端。第一個項目雖然也有後端，但是沒模擬。
在第四個項目中：SVG畫板學習到了SVG的概念。
總的來說，通過三部分的學習，最終初步會用vue了。
第一部分vue的基本知識 重點講述網站的發展和vue實例與模板語法
第二部分vue項目化 重點講述用vue CIL進行項目化。（前端路由和狀態管理的筆記寫在書上）
第三部分，用四個項目講解vue的項目開發。
之後，嘗試一下github上其他vue項目，然後使用elementUI進行前端網站開發；可能會用到不少組件。到時候一個一個試。
再之後，嘗試一下學習node.js，然後用express做做後端。
剩下就熟能生巧，根據這些工具然後去理解其底層知識，看HTML、CSS、JavaScript、DOM、網絡知識，還有響應式、兼容性、安全、SEO、CSR、SSR、異步編程，還有組件化、less、命名規範、性能優化、內存管理、工程化思想。
最後不斷實踐，不斷理解。