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

1、安裝node

安裝node：node官網下載，安裝完成後，打開命令行工具輸入命令node -v，若是出現對應版本號，就說明安裝成功了。

安裝npm：所須要的npm包管理器，是集成在node中的，因此，直接輸入npm -v，顯示出npm的版本信息

安裝淘寶鏡像cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

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

 

2、vue安裝

1.vue安裝：

$ cnpm install vue

 

2.安裝vue-cli腳手架構建工具：

# 全局安裝 vue-cli
$ cnpm install --global vue-cli

 

3.構建於webpack模板的一個新項目：

#my-project爲自定義項目名
$ vue init webpack my-project

初始化一個項目，或使用
$ vue init webpack-simple my-project

 

4.init

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

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）

? Project name vue-demo

? Project description demo

? Author luoxiaowei <luoxiaowei@100tal.com>

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset none

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recom

mended) npm

 

cd vue-demo

cnpm run dev 

 

3、安裝依賴

cnpm install

 

4、啓動

cnpm run dev

 

能看到下圖，則表示安裝成功。