使用nodeJs安裝Vue-cli並用它快速構建Vue項目

部分摘自：http://www.cnblogs.com/wisewrong/p/6255817.html（已在本地測試）

前提：nodeJs本地已安裝。

1、安裝 vue-cli

一、使用nodeJs安裝Vue-cli。

執行npm install --global vue-cli ，全局安裝vue-cli

----由於默認是從國外服務器下，可使用阿里巴巴在國內的鏡像服務器。

產生經過config命令設置默認下載路徑：

npm config set registry https://registry.npm.taobao.org 

npm info underscore (若是上面配置正確這個命令會有字符串response)

或編輯  ~/.npmrc 加入下面內容

registry = https://registry.npm.taobao.org

而後再執行：

npm install --global vue-cli

二、安裝後，檢查是否安裝成功

vue -V (在此注意V爲大寫)

2、構建vue項目

一、使用vue建一個項目名叫「my-project」（vue init webpack my-project），注意項目名不能有大寫。

----注：vue-cli 的模板包括 webpack 和 webpack-simple,前者是比較複雜專業的項目，他的配置並不全放在根目錄下的 webpack.config.js 中。

----webpack-simple 相對簡單的，它根目錄下才有個 webpack.config.js。

二、注意：

項目創建過程當中，有以下選擇，選擇NO。（該選項爲使用ESLint規範你的代碼，一個空格錯誤都將報錯，不開啓，避免沒必要要的麻煩）。

後兩項爲單元測試，能夠選擇No.

三、項目創建完成後，目錄結構以下：

四、安裝項目所需依賴，進入項目中：

npm install

完成後，會發現項目目錄下多出一個node_modules文件夾，裏面就是 vue-cli 建立的一個基於 webpack 的 vue.js 項目。

五、進入項目目錄文件夾（my-project）中，就可使用vue進行開發啦

六、使用npm run dev，即可以打開本地服務器實時查看效果（localhost:8080）

若是瀏覽器打開以後，沒有加載出頁面，有多是本地的 8080 端口被佔用，須要修改一下配置文件 config>index.js

建議將端口號改成不經常使用的端口。另外我還將 build 的路徑前綴修改成 ' ./ '（本來爲 ' / '），是由於打包以後，外部引入 js 和 css 文件時，若是路徑以 ' / ' 開頭，在本地是沒法找到對應文件的（服務器上沒問題）。因此若是須要在本地打開打包後的文件，就得修改文件路徑。

七、初始效果

 

8，退出監聽，能夠直接Ctrl+C，選擇Y。

 

3、打包上線

本身的項目文件都須要放到 src 文件夾下

項目開發完成以後，能夠輸入 npm run build 來進行打包工做

npm run build

打包完成後，會生成 dist 文件夾，若是已經修改了文件路徑，能夠直接打開本地文件查看

項目上線時，只須要將 dist 文件夾放到服務器就好了。