使用webpack構建vue專案並打包
阿新 • • 發佈:2018-12-16
1.首先安裝node.js
(因為需要npm)
2.安裝webpack
npm install -g webpack
3.安裝淘寶映象
npm install -g cnpm --registry=https://registry.npm.taobao.org
4.npm安裝vue.js
npm install vue -g
5.安裝vue-cli(vue的腳手架)
cnpm install -g vue-cli
6.構建vue專案
vue init webpack vue-mui
//選擇手動下載,就是npm install,如果不是手動,那麼他自己預設用npm下載
//(vue-mui就是檔名稱)
//vue init webpack-simple vueprofile(還是儘量使用上面的)
//(先建立簡單工程,然後再進入下一個步驟)
//cd進入專案,安裝依賴,執行
//npm install
最後會在你說在的碟符下
生成對應的vue專案
【C:\Users\16436>vue init webpack vuedemo就是表示在C:\Users\16436>路徑下面生成一個vuedemo檔案,如果cd到其他盤也是可以建一個專案的
】
7.然後用cd命令進入到該目錄下,執行:
npm run dev
或則執行
cnpm run dev
==========================================
如果是直接使用別人的專案,
cd到專案的目錄,然後為了防止缺少庫
直接npm install(新增缺少的依賴庫)
然後再執行
npm run dev
==========================================
最後如果需要打包並放到伺服器上則:
先修改下專案下的config->index.js(保證生成後路徑的正確)
build->utils.js
參考:https://blog.csdn.net/lhb_11/article/details/79455015
然後cd 到該vue專案下
再用npm run build
然後dist(後來生成的)目錄下會有index.html和static,這就是打包後生成的檔案了,可以看到html裡面有引入的js檔案
直接把dist資料夾扔到tomcat的webapp下就可以運行了