為什么學(xué)習(xí)并使用Vue

1.發(fā)展趨勢(shì)

作為一家“創(chuàng)意+整合+營(yíng)銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)建站提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、創(chuàng)意表現(xiàn)、網(wǎng)頁(yè)制作、系統(tǒng)開(kāi)發(fā)以及后續(xù)網(wǎng)站營(yíng)銷運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷方法,創(chuàng)造更大的價(jià)值。

最近這幾年的前端圈子，由于戲臺(tái)一般精彩紛呈，從 MVC 到 MVVM，你剛唱罷我登場(chǎng)。 backbone，AngularJS 已成昨日黃花，reactjs 如日中天，同時(shí)另一更輕量的 vue 發(fā)展勢(shì)頭更猛，號(hào)稱兼具了 angularjs 和 reactjs 的兩者優(yōu)點(diǎn)。

2.Vue能干嗎

移動(dòng)端的上網(wǎng)需求已經(jīng)遠(yuǎn)高于pc端，特別是 hybrid 方式的H5應(yīng)用中，但是性能問(wèn)題一直是痛點(diǎn)。 如果使用 SPA（就是俗稱的單頁(yè)應(yīng)用（Single Page Web Application）），SPA它將所有的活動(dòng)局限于一個(gè)Web頁(yè)面中，僅在該Web頁(yè)面初始化時(shí)加載相應(yīng)的HTML、JavaScript 和 CSS。一旦頁(yè)面加載完成了，SPA不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)。沒(méi)有頁(yè)面切換，就沒(méi)有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。

陸續(xù)續(xù)看vue已經(jīng)二個(gè)多月了，3月份使用vue2.0開(kāi)發(fā)了一個(gè)簡(jiǎn)單的博客，在用vue人性化優(yōu)勢(shì)的同時(shí)，的也遇到過(guò)很多坑，很多問(wèn)題，分享一下我遇到的問(wèn)題和解決辦法

Vue2_blog

vue2,vuex,vue-cli,axios,webpack,express,MySQL

Build Setup

# install dependenciesnpm install# serve with hot reload at localhost:8080 (本地啟動(dòng))npm run dev# build for production with minification （生成靜態(tài)文件，用于打包上傳服務(wù)器）npm run build1234567812345678

主要實(shí)現(xiàn)的功能

1.用戶登錄

2.用戶注冊(cè)

3.用戶發(fā)帖

4.用戶評(píng)論帖

5.用戶留言

構(gòu)建

使用vue-cli來(lái)構(gòu)建初始化項(xiàng)目，非常方便，相當(dāng)于生成項(xiàng)目模板這樣子。

vuex

vue就我個(gè)人理解，是數(shù)據(jù)驅(qū)動(dòng)，實(shí)現(xiàn)頁(yè)面組件化開(kāi)發(fā)，更好管理和維護(hù)，vuex是用作組件間的通信，當(dāng)然了如果頁(yè)面夠簡(jiǎn)單，也可以使用其他方法進(jìn)行通信（傳值），比如props等。

axios

說(shuō)實(shí)話，項(xiàng)目前期我還用的是vue-resource，后面才統(tǒng)一改用axios（尤大大本人都力推的），二者都是用于客戶端和服務(wù)端通信的，也就是用作ajax請(qǐng)求的。

webpack

webpack是一款模塊加載器兼打包工具，它能把各種資源，例如js（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來(lái)使用和處理。比如，我們vue組件化開(kāi)發(fā)，會(huì)用 “.vue” 文件，這種文件不會(huì)被瀏覽器所解析，所以需要用webpack來(lái) “格式化” 他們，讓他們變?yōu)闉g覽器可以解析的文件格式。還有，還有，用webpack，你就可以愉快的使用es6的語(yǔ)法啦！

express & mysql

所謂一個(gè)”系統(tǒng)”，怎么只能是簡(jiǎn)單的靜態(tài)頁(yè)面？在這里用了express（express 是一個(gè)基于 Node.js 平臺(tái)的開(kāi)發(fā)框架）和mysql來(lái)進(jìn)行編寫(xiě)數(shù)據(jù)存儲(chǔ)的后端api，用于用戶信息在數(shù)據(jù)庫(kù)里存儲(chǔ)和讀取。

pm2

pm2 是一個(gè)帶有負(fù)載均衡功能的Node應(yīng)用的進(jìn)程管理器,并保證進(jìn)程永遠(yuǎn)都活著，0秒的重載。按照我的理解，通俗的將，它的作用就是，本地開(kāi)發(fā)環(huán)境，你要開(kāi)啟node服務(wù)，實(shí)現(xiàn)某些功能(比如監(jiān)聽(tīng)某個(gè)端口)，就會(huì)在控制臺(tái)執(zhí)行”node app.js”(比如這個(gè)文件叫app吧！)，對(duì)應(yīng)的node服務(wù)就會(huì)開(kāi)啟了，但是你只要一關(guān)閉這個(gè)控制臺(tái)窗口，他就沒(méi)有對(duì)應(yīng)的服務(wù)進(jìn)程了，每次起服務(wù)都得”控制臺(tái) -> node app.js”。在生產(chǎn)環(huán)境來(lái)說(shuō)，很麻煩，這會(huì)就用到了pm2，只需要執(zhí)行一次”pm2 start app.js”。ok，一勞永逸，控制臺(tái)窗口隨你怎么自由開(kāi)啟關(guān)閉，對(duì)應(yīng)的服務(wù)進(jìn)程永遠(yuǎn)在后面運(yùn)行著。

Github地址

Github源碼

項(xiàng)目預(yù)覽

Vue_blog(只適配了移動(dòng)端)

總結(jié)

剛用vue開(kāi)發(fā)的時(shí)候，遇到了很多問(wèn)題，也犯了很多錯(cuò)誤，不過(guò)，現(xiàn)在而言，自己收獲蠻多。自己的vue博客（留言板）已經(jīng)開(kāi)發(fā)完成。我想說(shuō)的是，麻雀雖小，五臟俱全，雖然只是一個(gè)小應(yīng)用，但它涵蓋了許多知識(shí)點(diǎn)，包括前端，后端，數(shù)據(jù)庫(kù)等一個(gè)網(wǎng)站的所必須的一些組成要素，對(duì)我來(lái)說(shuō)，學(xué)習(xí)意義很大，愿共勉！