本筆記原文網址：http://jspang.com/2017/04/10/vue-cli/#twovue
1、安裝vue-clinode
安裝vue-cli的前提是你已經安裝了npm，安裝npm你能夠直接下載node的安裝包進行安裝。你能夠在命令行工具裏輸入npm -v 檢測你是否安裝了npm和版本狀況。出現版本號說明你已經安裝了npm和node，我這裏的npm版本爲3.10.10。若是該命令不可使用，須要安裝node軟件包，根據你的系統版本選擇下載安裝就能夠了。webpack
下載地址：http://nodejs.cn/download/git
npm沒有問題，接下來咱們能夠用npm 命令安裝vue-cli了，在命令行輸入下面的命令：github
|
1
|
npm install vue-cli -g
|
-g :表明全局安裝。若是你安裝時報錯，通常是網絡問題，你能夠嘗試用cnpm來進行安裝。安裝完成後，能夠用vue -V來進行查看 vue-cli的版本號。注意這裏的V是大寫的。我這裏版本號是2.8.1.web
若是vue -V的命令管用了，說明已經順利的把vue-cli安裝到咱們的計算機裏了。vue-router
2、初始化項目vue-cli
咱們用vue init命令來初始化項目，具體看一下這條命令的使用方法。npm
|
1
|
vue init <template-name> <project-name>
|
init：表示我要用vue-cli來初始化項目json
<template-name>：表示模板名稱，vue-cli官方爲咱們提供了5種模板，
webpack-一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。
webpack-simple-一個簡單webpack+vue-loader的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。
browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
browserify-simple-一個簡單Browserify+vueify的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。
simple-一個最簡單的單頁應用模板。
<project-name>：標識項目名稱，這個你能夠根據本身的項目來起名字。
在實際開發中，通常咱們都會使用webpack這個模板，那咱們這裏也安裝這個模板，在命令行輸入如下命令：
|
1
|
vue init webpack vuecliTest
|
輸入命令後，會詢問咱們幾個簡單的選項，咱們根據本身的須要進行填寫就能夠了。
- Project name :項目名稱 ，若是不須要更改直接回車就能夠了。注意：這裏不能使用大寫，因此我把名稱改爲了vueclitest
- Project description:項目描述，默認爲A Vue.js project,直接回車，不用編寫。
- Author：做者，若是你有配置git的做者，他會讀取。
- Install vue-router? 是否安裝vue的路由插件，咱們這裏須要安裝，因此選擇Y
- Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。咱們這裏不須要輸入n，若是你是大型團隊開發，最好是進行配置。
- setup unit tests with Karma + Mocha? 是否須要安裝單元測試工具Karma+Mocha，咱們這裏不須要，因此輸入n。
- Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試，咱們這裏不須要，因此輸入n。
命令行出現上面的文字，說明咱們已經初始化好了第一步。命令行提示咱們如今能夠做的三件事情。
一、cd vuecliTest 進入咱們的vue項目目錄。
二、npm install 安裝咱們的項目依賴包，也就是安裝package.json裏的包，若是你網速很差，你也可使用cnpm來安裝。
三、npm run dev 開發模式下運行咱們的程序。給咱們自動構建了開發用的服務器環境和在瀏覽器中打開，並實時監視咱們的代碼更改，即時呈現給咱們。
出現這個頁面，說明咱們的初始化已經成功，如今能夠快樂的玩耍了。