從零開始利用vue-cli搭建簡單音樂網站（一）
最近在學習vue框架，練習了一些例子之後，想著搭建一個vue項目，了解到官方有提供一個vue-cli工具來搭建項目腳手架，嘗試了一下，寫下博客來記錄一下。
一、工具環境
1、node.js 6.10.0，目前node.js最新版本是8.7.0，可以到官網下載最新版本安裝。鏈接：http://nodejs.cn/download/
2、編輯器，Hbuilder 8.8.4
3、windows 8.1
二、創建項目
1、安裝node.js，默認安裝在"C:\Program Files\nodejs"，隨node.js安裝的還有包管理工具npm（關於node.js和npm更多信息可以自行上網搜索資料），打開其自帶的命令行編輯器node.js command prompt（使用windows的cmd也可以），由於npm默認全局安裝路徑為"C:\Users\dippe_000\AppData\Roaming\npm\node_modules"，不希望安裝在C盤的話可以通過以下命令修改：
npm config set cache "E:\nodeJs\cache"
npm config set prefix "E:\nodeJs"
2、安裝vue-cli和webpack
來到E盤目錄下，分別輸入運行"npm install -g vue-cli"和"npm install -g webpack"，安裝完成後在"E:\nodeJs\node_modules"目錄下應該可以看到"vue-cli"和"webpack"文件夾，說明已經安裝成功，這裏如果安裝報錯的話可以嘗試下面兩種方法：
第一種：以管理員身份運行命令行
第二種：直接在當前目錄輸入以下命令
npm config set http-proxy null
npm config set registry http://registry.cnpmjs.org/
3、用vue-cli搭建項目
在E盤新建一個工作目錄作為項目目錄，如"E:\workspaces\Hbuilder"，然後命令行輸入"cd E:\workspaces\Hbuilder"進到該目錄下面，輸入"vue init webpack vuetest"初始化一個vue項目。如下：
以上所有選擇的意思分別為：
Project name（項目名稱）
Project description（項目描述）
Author（作者）
下面是一個選項（我選擇第一個）
Runtime + Compiler: recommended for most users （運行加編譯）
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時
Install vue-router? (Y/n) （是否安裝vue-router，我選擇安裝）
Use ESLint to lint your code? (Y/n) （是否使用ESLint管理代碼，我選擇否）
Setup unit tests with Karma + Mocha? (Y/n) （是否安裝單元測試，我選擇安裝）
Setup e2e tests with Nightwatch(Y/n)? （是否安裝e2e測試 ，我選擇安裝）
到這裏，構建完成，關於使用vue-cli搭建項目的信息，可以參考：http://www.jianshu.com/p/2769efeaa10a，作者：玄木
4、安裝node_modules以及運行項目
分別執行以下命令：
cd vuetest
npm install
npm run dev
第一行命令是進到新建的vuetest目錄裏面，第二行npm install 會在當前目錄下新建一個node_modules目錄並且安裝所有依賴工具包。由於工具包較多，所以會花費很長一段時間。第三句是運行該項目在本地服務器，可以通過瀏覽器訪問，默認地址為：“http://localhost:8080”
如果最後一步出錯，可以嘗試以下方法：
第一種：端口8080被占用，打開項目的"config\index.js"文件修改port: 8080為其他端口
第二種：電腦找不到默認瀏覽器，嘗試更換默認瀏覽器為其他瀏覽器
如果成功的話會在瀏覽器看到如下結果：
後記：這篇文章主要記錄了如何用vue-cli生成一個vue項目，下面的文章將會記錄如何用該腳手架搭建起一個音樂網站，因為本人也沒有太多的經驗，所有的實現都是自己一步步摸索的，可能會有很多地方沒有考慮好，希望大家能提出自己看法意見，一起交流。
參考鏈接：
node.js下載：http://nodejs.cn/download/
vue-cli的使用：http://www.jianshu.com/p/2769efeaa10a
vue-cli生成項目的詳解：http://blog.csdn.net/hongchh/article/details/55113751
從零開始利用vue-cli搭建簡單音樂網站（一）