1. 程式人生 > >使用webpack構建vue專案並打包

使用webpack構建vue專案並打包

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下就可以運行了