vue-cli webpack vue-router vue-resource

• vue-cli:一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案
• webpack:是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源
• vue-router:SPA單頁應用必備路由模組（下面詳細介紹）
• vue-resource:SPA單頁應用資源訪問模組,類似於Jquery中的$.ajax

1.搭建環境

搭建環境之前，你需要在本地安裝node,npm是nodejs的包管理器，用於node外掛管理（包括安裝、解除安裝、管理依賴)等，會隨著node的安裝而自動安裝。但因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常。所以國內淘寶團隊在npm的基礎上，為我們提供了強大的cnpm

測試cnpm是否安裝：cnpm -v，下圖表示安裝成功。

cnpm和npm的用法一致，但凡用到npm的地方，使用cnpm代替即可，下載速度會提升一個檔次！

接下來執行以下命令：

• cnpm install -g webpack

• cnpm install -g vue-cli

• 進入目標目錄，執行vue init webpack myVueStudy

• cnpm install

• cnpm run dev

大功告成，專案已成功啟動，瀏覽器會自動為我們開啟一個頁面，這就是我們將要開發的專案主頁面。見下圖

2.專案檔案結構

開啟我們建立的myVueStudy專案，專案目錄如下

src目錄結構如下

分別看下app.vue和main.js兩個重要檔案

3.開始開發

vue腳手架為我們構成的vue.app檔案中的img和router-view,沒啥卵用，刪除即可。我們在該檔案中引入三個一級路由，定義一些樣式，我們在src目錄下面建立一個pages目錄，用於建立自定義元件（一個個頁面）。static目錄下面建立一個css目錄和data目錄，分別用來存放css樣式和資料。檔案目錄如下

編寫過後的main.js檔案如下

編寫過後的app.vue檔案如下

當我們點選router-link to="/html"

好了，到這裡，簡單的一個vue-cli專案框架已搭建完成，其中運用到了vue-router路由模組，vue-resource網路請求模組，vue-awesome-swiper輪播圖元件，github上面還有很多拿來可用的元件，有興趣可以自己嘗試下。

最終效果圖如下，不會製作gif動圖。會的朋友告訴我下唄！

在使用vue-cli webpack構建專案的過程中，要注意以下一些方面
- 要在引用元件之前通過命令列cnpm install <元件name>來全域性安裝這些元件
- vue元件中，template需要有一個根元素，否則控制檯會報錯
- 一級路由會了，二級路由就很簡單，可以自行百度學習下

該文章純手工製作，有不對的地方，還請指出。大家共同進步，