Vue.js：使用vue-cli快速構建項目

標籤：模板   local   技術分享   com   UI   dex   ref   webpack   實現   

vue-cli是什嗎？

vue-cli 是vue.js的腳手架，用於自動產生vue.js模板工程的。

vue-cli怎麼使用？

安裝vue-cli之前，需要先安裝了vue和webpack，不知道怎麼安裝的可以看我之前的文章《Vue + Webpack 實現SPA應用文檔》
安裝vue-cli

npm install -g vue-cli                       //全域安裝vue-cli
vue init webpack projectName        //產生項目名為projectName的模板，這裡的項目名projectName隨你自己寫
cd projectName                              
npm install                                      //初始化安裝依賴

這樣子項目就安裝完了。產生的項目下面的目錄是這樣的


然後執行

npm run dev                

在瀏覽器開啟http://localhost:8080，則可以看到歡迎頁面了。


但是這個只能在本地跑，要如何在我們自己的伺服器上訪問呢？此時需要執行

npm run build

會產生靜態檔案，在根目錄的dist裡，裡面有個index.html，這是伺服器訪問的路徑指定到這裡就可以訪問我們自己的項目了。但是我發現個問題就是產生index.html裡引用的css和js的引用路徑不對，這時候就需要自己修改一下配置了。

進入config/index.js

原來的配置的引用路徑為


我自己更改為


這樣就能正常訪問了。

Vue.js：使用vue-cli快速構建項目