詳解基于webpack和vue.js搭建開(kāi)發(fā)環(huán)境-創(chuàng)新互聯(lián)

前言

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出元江縣免費(fèi)做網(wǎng)站回饋大家。

在對(duì)著產(chǎn)品高舉中指怒發(fā)心中之憤后，真正能夠解決問(wèn)題的是自身上的改變，有句話說(shuō)的好：你雖然改變不了全世界，但是你有機(jī)會(huì)改變你自己。秉承著“不聽(tīng)老人言，吃虧在眼前”的優(yōu)良作風(fēng)，我還是決定玩火自焚。

問(wèn)題所在

之前的項(xiàng)目總結(jié)為以下內(nèi)容：

1、AMD模塊規(guī)范開(kāi)發(fā)，使用requirejs實(shí)現(xiàn)，使用rjs打包，最終導(dǎo)致的結(jié)果是，輸出的項(xiàng)目臃腫，腫的就像一坨狗不理……不忍直視

2、使用gulp進(jìn)行打包，這一點(diǎn)貌似沒(méi)有可吐槽的地方，畢竟都是被grunt折磨過(guò)來(lái)的……

3、數(shù)據(jù)的渲染使用模板引擎，這就意味著你要手動(dòng)管理DOM，這樣，你的業(yè)務(wù)代碼參雜著你的數(shù)據(jù)處理、DOM管理，滿屏幕的毛線……

4、模塊化不足，雖然使用require進(jìn)行了模塊管理，但是大部分業(yè)務(wù)邏輯還是充斥在一個(gè)文件里，這與最近流行的組件化概念冰火不容，拒絕落后……

5、諸如 擴(kuò)展性 、 維護(hù)性 我想早已不言而喻，不需贅述，再述就真TM是累贅了。

新框架要解決的問(wèn)題：

1、要使構(gòu)建輸出的項(xiàng)目像你鄰家小妹妹一樣、瘦的皮包骨。（也許是營(yíng)養(yǎng)不良）

2、要實(shí)現(xiàn)真正的模塊化、組件化的開(kāi)發(fā)方式，真正去解決維護(hù)難、擴(kuò)展難的問(wèn)題。（從此不怕產(chǎn)品汪）

3、業(yè)務(wù)邏輯專(zhuān)注數(shù)據(jù)處理，手動(dòng)管理DOM的年代就像……像什么呢？（畢竟成人用品也越來(lái)越自動(dòng)化了）

4、等等…….（其實(shí)好處無(wú)需贅述，來(lái)，往下看）

為了達(dá)成以上目標(biāo)，我們探討一下解決方案：

1、老項(xiàng)目的構(gòu)建輸出為什么臃腫？

答：因?yàn)槭褂玫氖莚equire的rjs進(jìn)行構(gòu)建打包的，了解rjs的都知道，它會(huì)把項(xiàng)目所有依賴(lài)都打包在一個(gè)文件里，如果項(xiàng)目中有很多頁(yè)面依賴(lài)這個(gè)模塊，那么rjs并不會(huì)把這個(gè)模塊提取出來(lái)作為公共模塊，所以就會(huì)有很多復(fù)制性的內(nèi)容，所以項(xiàng)目自然臃腫。

解決方案：使用webpack配合相應(yīng)的loader，來(lái)完成模塊加載和構(gòu)建的工作。

2、老項(xiàng)目為什么模塊化的不足？

答：老項(xiàng)目的模塊化，僅僅體現(xiàn)在js層面，解決了模塊引用的問(wèn)題，但在開(kāi)發(fā)方式上，依然可以看做是過(guò)程式的，這樣的結(jié)果就導(dǎo)致了項(xiàng)目的難擴(kuò)展和難維護(hù)，讓開(kāi)發(fā)人員在與產(chǎn)品汪的對(duì)峙中，并不從容。

解決方案：Vue.js能夠很好的解決組件化的問(wèn)題，配合 Vue.js 官方提供的 vue-loader 能夠很好的結(jié)合webpack做組件化的開(kāi)發(fā)架構(gòu)。

3、如何避免手動(dòng)管理DOM？

答：如果你在做數(shù)據(jù)展示這一塊的開(kāi)發(fā)工作，相信你一定體會(huì)頗深，發(fā)送http請(qǐng)求到服務(wù)端，拿到返回的數(shù)據(jù)后手動(dòng)渲染DOM至頁(yè)面，這是最原始的開(kāi)發(fā)方式，無(wú)非再加一個(gè)模板引擎之類(lèi)的，但最終還是避免不了手動(dòng)渲染，如果頁(yè)面邏輯復(fù)雜，比如給你來(lái)一個(gè)翻頁(yè)的功能，再來(lái)一個(gè)篩選項(xiàng)，估計(jì)你會(huì)覺(jué)得世界并不那么美好。

解決方案：MVVM模式能夠很好的解決這個(gè)問(wèn)題，而Vue.js的核心也是MVVM。

webpack

你肯定聽(tīng)說(shuō)過(guò)webpack，如果直接對(duì)你描述什么是webpack你可能感受不到他的好處，那么在這之前，我相信你肯定使用過(guò)gulp或者grunt，如果你沒(méi)使用過(guò)也可以，至少你要聽(tīng)說(shuō)過(guò)并且知道gulp和grunt是干什么的，假如這個(gè)你還不清楚，那么你并不是一個(gè)合格的前端開(kāi)發(fā)人員，這篇文章也不適合你，你可以從基礎(chǔ)的地方慢慢學(xué)起。

gulp和grunt對(duì)于每一個(gè)前端開(kāi)發(fā)人員應(yīng)該是不陌生的，它們?yōu)榍岸颂峁┝俗詣?dòng)化構(gòu)建的能力，并且有自己的生態(tài)圈，有很多插件，使得我們告別刀耕火種的時(shí)代，但是它們并沒(méi)有解決模塊加載的問(wèn)題，比如我們之前的項(xiàng)目是使用gulp構(gòu)建的，但是模塊化得工作還是要靠require和rjs來(lái)完成，而gulp除了完成一些其他任務(wù)之外，就變成了幫助我們免除手動(dòng)執(zhí)行命令的工具了，別無(wú)它用。

而webpack就不同了，webpack的哲學(xué)是一切皆是模塊，無(wú)論是js/css/sass/img/coffeejs/ttf….等等，webpack可以使用自定義的loader去把一切資源當(dāng)做模塊加載，這樣就解決了模塊依賴(lài)的問(wèn)題，同時(shí)，利用插件還可以對(duì)項(xiàng)目進(jìn)行優(yōu)化，由于模塊的加載和項(xiàng)目的構(gòu)建優(yōu)化都是通過(guò)webpack一個(gè)”人“來(lái)解決的，所以模塊的加載和項(xiàng)目的構(gòu)建優(yōu)化并不是無(wú)機(jī)分離的，而是有機(jī)的結(jié)合在一起的，是一個(gè)組合的過(guò)程，這使得webpack在這方面能夠完成的更出色，這也是webpack的優(yōu)勢(shì)所在。

如果你看不懂上面的描述，沒(méi)關(guān)系，你只需要知道一下幾點(diǎn)：

1、過(guò)去使用require和rjs等進(jìn)行模塊加載的方式，可以替換為webpack提供的指定loader去完成，你也可以自己開(kāi)發(fā)加載特定資源的loader。

2、過(guò)去使用gulp和grunt完成項(xiàng)目構(gòu)建優(yōu)化的方式，可以替換成webpack提供的插件和特定的配置去完成。

3、由于模塊的加載和項(xiàng)目的構(gòu)建優(yōu)化有機(jī)的結(jié)合，所以webpack能夠更好的完成這項(xiàng)工作

4、并不是說(shuō)有了webpack就淘汰的gulp等，有些特定的任務(wù)，還是要使用gulp去自定義完成的。但是不保證webpack的未來(lái)發(fā)展趨勢(shì)會(huì)怎么樣。

Vue.js

Vue.js是一個(gè)MVVM模式的框架，如果讀者有angular經(jīng)驗(yàn)，一定能夠很快入門(mén)Vue的，那么問(wèn)題來(lái)了，為什么使用Vue而不用angular，

首先，Vue的體積小，輕量在移動(dòng)端開(kāi)發(fā)始終是一個(gè)不可忽略的話題，其次，Vue在實(shí)現(xiàn)上與angular有本質(zhì)的區(qū)別，讀者可以通過(guò)下面兩個(gè)鏈接來(lái)了解：

1、Vue的變化追蹤和計(jì)算屬性的區(qū)別等

2、Vue 與 angular 及 react 等框架的對(duì)比

3、第三點(diǎn)就是Vue提供了webpack的loader —-> [vue-loader]，使用它可以讓項(xiàng)目的組件化思想更加清晰

綜上所述，這就是選用Vue的原因

npm 和 nodejs

npm 的全稱(chēng)是 nodejs包管理，現(xiàn)在越來(lái)越多的項(xiàng)目(包)都可以通過(guò)npm來(lái)安裝管理，nodejs是js運(yùn)行在服務(wù)器端的平臺(tái)，它使得js的能力進(jìn)一步提高，我們還要使用nodejs配合 webpack 來(lái)完成熱加載的功能。所以讀者最好有nodejs的開(kāi)發(fā)經(jīng)驗(yàn)，如果有express的經(jīng)驗(yàn)更好。

讓我們一步一步從零搭建這個(gè)項(xiàng)目

首先新建一個(gè)目錄，名為 myProject ，這是我們的項(xiàng)目目錄。然后執(zhí)行一些基本的步驟，比如 npm init 命令，在我們的項(xiàng)目中生成 package.json 文件，這幾乎是必選的，因?yàn)槲覀兊捻?xiàng)目要有很多依賴(lài)，都是通過(guò)npm來(lái)管理的，而npm對(duì)于我們項(xiàng)目的管理，則是通過(guò)package.json文件：

npm init

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：詳解基于webpack和vue.js搭建開(kāi)發(fā)環(huán)境-創(chuàng)新互聯(lián)
本文地址：http://www.muchs.cn/article34/diehpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、用戶體驗(yàn)、面包屑導(dǎo)航、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)