一、什么是webpack?
webpack是一個module bundler(模塊打包工具)愚争,其可以兼容各種js書寫規(guī)范映皆,且可以處理模塊間的依賴關(guān)系,具有更強大的js模塊化的功能轰枝。Webpack對它們進(jìn)行統(tǒng)一的管理以及打包發(fā)布捅彻,其官方主頁用下面這張圖來說明Webbpack的作用。
what-is-webpack.png
在講課的時候講解過webpack鞍陨,并且從零開始使用了webpack搭建了一個工作流步淹,在這里就不啰嗦講解了。
二诚撵、使用vue-cli搭建開發(fā)環(huán)境
在使用Vue-cli之前缭裆,需要安裝Nodejs環(huán)境和Vue-cli工具。
2.1安裝Nodejs
在www.nodejs.org網(wǎng)站下載相應(yīng)的Nodejs版本寿烟,或者使用NVM來管理Nodejs澈驼。
2.2在全局安裝Vue-cli
npm install -g vue-cli
2.3構(gòu)建項目
1. vue init webpack my_prj
其中webpack是模板名稱,my_prj是自定義的項目名稱筛武,命令執(zhí)行之后缝其,會在當(dāng)前目錄生成一個以該名稱命名的項目文件夾。
2.cd my_prj
使用cd命令切換到相應(yīng)的文件目錄中
3.cnpm install
使用cnpm install為整個工程安裝依賴包畅铭。這里咱們使用的是cnpm氏淑,防止下載資源的時候下載不了,因為cnpm是阿里的一個下載工具硕噩。
4.使用npm run dev啟動工程
因為在package.json中使用了
2017-05-11_130127.png
5.打包上線
自己編寫的代碼都放在src文件夾下假残,項目開發(fā)完成之后,可以輸入npm run build來進(jìn)行打包工作炉擅。