在使用webpack+vue.js構(gòu)建項(xiàng)目之前，首先得全局安裝node勺爱，必須在node環(huán)境下構(gòu)建晃琳。
1.創(chuàng)建一個(gè)基于webpack的項(xiàng)目
創(chuàng)建一個(gè)文件夾（如：vuell），使用 （vue init webpack +文件夾名） 命令創(chuàng)建項(xiàng)目目錄琐鲁。
vue init webpack vuell
接下來(lái)有幾個(gè)選項(xiàng)需要選擇卫旱，這根據(jù)項(xiàng)目開(kāi)發(fā)的需求選擇是否安裝，如下圖围段，可以直接按enter
6DC7D6FD811130CFBEE44D9E938C0DE7.png
創(chuàng)建基于webpack的目錄創(chuàng)建成功后顾翼，文件夾內(nèi)容如下：
DE15EF9F02B12E40658EF431C676E63D.png
2. 開(kāi)啟服務(wù)器
cd 進(jìn)入文件夾（vuell）運(yùn)行一下命令開(kāi)啟服務(wù)器
1. cd vuell
2. npm run dev
終端出現(xiàn)下面的服務(wù)器端口時(shí)，則配置成功
F66727C3BF85ACD5F191B2CAFB712CB3.png
訪問(wèn)http://localhost:8081/本地服務(wù)器：會(huì)出現(xiàn)vue的界面
A3B0F9D29E2B61234550FD189456797B.png
這樣奈泪，基于webpack的vue項(xiàng)目就構(gòu)建成功了适贸，最后來(lái)說(shuō)一下項(xiàng)目完成時(shí)，項(xiàng)目的打包
項(xiàng)目打包
一般寫(xiě)項(xiàng)目都是操作src文件夾涝桅，html拜姿，css，js苹支，image
等都在這寫(xiě)砾隅，項(xiàng)目完成時(shí)，使用 npm run build 打包項(xiàng)目债蜜，此時(shí)會(huì)生成一個(gè)dist!
文件夾晴埂，放的便是打包后的項(xiàng)目。
npm run build
8693837C78C3BB38C5AA10355A727C91.png
end----------------
