Vue搭建腳手架1

Vue2.0搭建Vue腳手架（vue-cli）

此文章參考了網上一些前人的技術分享，本身拿過來總結一下。此文章是基於webpack構建的vue項目，並實現簡單的單頁面應用。其中利用到的相關技術會簡單加以說明 

說明： 在網上找了不少的搭建腳手架教程，但都不求甚解。終於找到2個比較好的教程，讀者可對比閱讀1和2，在這裏分享給你們，但願對初學者有所幫助。　　　　ps：高手請繞道。

1、那麼咱們就從最簡單的環境搭建開始：

1. 安裝node.js，從node.js官網下載並安裝node，安裝過程很簡單，一路「下一步」就能夠了（傻瓜式安裝）。安裝完成以後，打開命令行工具(win+r，而後輸入cmd)，輸入 node -v，以下圖，若是出現相應的版本號，則說明安裝成功。
   
   

   這裏須要說明下，由於在官網下載安裝node.js後，就已經自帶npm（包管理工具）了，另須要注意的是npm的版本最好是3.x.x以上，以避免對後續產生影響。

2. 安裝淘寶鏡像，打開命令行工具，把這個（npm install -g cnpm --registry= https://registry.npm.taobao.org）複製（這裏要手動複製就是用鼠標右鍵那個，具體爲啥很少解釋），安裝這裏是由於咱們用的npm的服務器是外國，有的時候咱們安裝「依賴」的時候很很慢很慢超級慢，因此就用這個cnpm來安裝咱們說須要的「依賴」。安裝完成以後輸入 cnpm -v，以下圖，若是出現相應的版本號，則說明安裝成功。
   
   
3. 安裝webpack，打開命令行工具輸入：npm install webpack -g，安裝完成以後輸入 webpack -v，以下圖，若是出現相應的版本號，則說明安裝成功。
   
4. 安裝vue-cli腳手架構建工具，打開命令行工具輸入：npm install vue-cli -g，安裝完成以後輸入 vue -V（注意這裏是大寫的「V」），以下圖，若是出現相應的版本號，則說明安裝成功。
   
   

2、經過以上四步，咱們須要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建項目

1. 在硬盤上找一個文件夾放工程用的。這裏有兩種方式指定到相關目錄：①cd 目錄路徑 ②若是以安裝git的，在相關目錄右鍵選擇Git Bash Here
2. 安裝vue腳手架輸入：vue init webpack exprice ，注意這裏的「exprice」 是項目的名稱能夠說是隨便的起名，可是須要主要的是「不能用中文」。

   $ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令
   This will install Vue 2.x version of the template. ---------------------這裏說明將要建立一個vue 2.x版本的項目
   For Vue 1.x use: vue init webpack#1.0 exprice
   ? Project name (exprice) ---------------------項目名稱
   ? Project name exprice
   ? Project description (A Vue.js project) ---------------------項目描述
   ? Project description A Vue.js project
   ? Author Datura --------------------- 項目建立者
   ? Author Datura
   ? Vue build (Use arrow keys)
   ? Vue build standalone
   ? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）
   ? Install vue-router? Yes
   ? Use ESLint to lint your code? (Y/n) n ---------------------是否啓用eslint檢測規則，這裏我的建議選no
   ? Use ESLint to lint your code? No
   ? Setup unit tests with Karma + Mocha? (Y/n)
   ? Setup unit tests with Karma + Mocha? Yes
   ? Setup e2e tests with Nightwatch? (Y/n)
   ? Setup e2e tests with Nightwatch? Yes
   vue-cli · Generated "exprice".
   To get started: --------------------- 這裏說明如何啓動這個服務
   cd exprice
   npm install
   npm run dev
   以下圖：

   

3. cd 命令進入建立的工程目錄，首先cd exprice（這裏是本身建工程的名字）；
4. 安裝項目依賴：npm install，由於自動構建過程當中已存在package.json文件，因此這裏直接安裝依賴就行。不要從國內鏡像cnpm安裝(會致使後面缺了不少依賴庫)，可是可是若是真的安裝「個把」小時也沒成功那就用：cnpm install 吧
5. 安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource，輸入：cnpm install vue-router vue-resource --save。

   建立完成的「exprice」目錄以下：

   
   
   下面我簡單的說明下各個目錄都是幹嗎的：
   
   
   1. 啓動項目，輸入：npm run dev。注：之後打開vue的頁面就要在cmd中 先進入工程目錄cd 項目文件名，再輸入：npm run dev　　
   2. 服務啓動成功後瀏覽器會默認打開一個「歡迎頁面」，以下圖：
6. 

   注意：這裏是默認服務啓動的是本地的8080端口，因此請確保你的8080端口不被別的程序所佔用。

   至此簡單的一個項目構建完畢....後面我將繼續利用這個構建的項目寫一個簡單的單頁面應用。

   看到這裏給你們推薦一個ide用Atom而後安裝vue插件便可，很是之好用、

7. 注：　本文引用於http://www.jianshu.com/p/1626b8643676