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

1、安裝node.js

進入官網下載node.js

2、安裝 cnpm

1、說明：npm（node package manager）是nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）；

2、使用npm安裝插件：命令提示符執行npm install <name> 

3、選裝 cnpm  由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常。 

安裝：npm install -g cnpm --registry=https://registry.npm.taobao.org

輸入cnpm -v，能夠查看當前cnpm版本

 

3、安裝vue-cli腳手架構建工具

vue-cli 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

安裝：$ cnpm install vue-cli –g     //g表示全局安裝

安裝完成以後輸入 vue -V（注意這裏是大寫的「V」），以下圖，若是出現相應的版本號，則說明安裝成功。

 

 

4、建立一個基於webpack模板的新項目 

要建立項目，首先咱們要選定目錄，而後再命令行中把目錄轉到選定的目錄。可使用：

$ vue init webpack my-app      // my-app爲自定義項目名

 

運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，做者等信息，若是不想填直接回車默認就好

 

Project name (my-app) # 項目名稱（個人項目）

 

Project description (A Vue.js project) # 項目描述一個Vue.js 項目

 

Author 做者（你的名字）

 

Install vue-router? (Y/n) # 是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）

 

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼？ （Y [ yes ] / N [ no ]）

 

Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint（使用箭頭鍵）

 

Setup unit tests with Karma + Mocha? (Y/n) # 設置單元測Karma + Mocha？ （Y/ N）

 

Setup e2e tests with Nightwatch? (Y/n) # 設置端到端測試，Nightwatch？ （Y/ N）

 

注：固然這些都看你本身我的的狀況

  

5、運行項目 

$ cnpm run dev 

 

運行成功後，瀏覽器直接顯示的是頁面以下：

6、安裝項目所須要的依賴

剛初始化的項目是沒有依賴的，若是運行會報相似這樣的錯誤，輸入命令

$ cnpm install 依賴文件名

 ctrl+c 退出服務

my-app/ config/index.js