資訊專欄INFORMATION COLUMN
摘要：使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新。為項(xiàng)目配置文件。為項(xiàng)目靜態(tài)資源目錄。其實(shí)個(gè)人感覺通用項(xiàng)目目錄可以很隨意的搭配，比如說之后清空目錄封裝通用組件，像是啊，滑動(dòng)常用組件。
寫在前面的個(gè)人體會(huì)，大神們可以跳過
這段時(shí)間接手一個(gè)后臺(tái)管理項(xiàng)目，從最開始寫一點(diǎn)我自己的體會(huì)吧。
首先Vue，Angular和React是當(dāng)今主流前端三大框架。Vue是一個(gè)用來構(gòu)建網(wǎng)頁的JS庫，相比較Angular和React框架來說，Vue的出現(xiàn)雖然晚一些，但是他吸取了Angular和React的教訓(xùn)，變得更為靈活，不是非要根據(jù)框架的規(guī)定非要如此如此，更容易發(fā)展成為公司自己的組件庫，轉(zhuǎn)換為自己的體系。
Angular有許多工具，復(fù)雜的語法，Vue.js 比起 Angular 要簡單的多，甚至于要更好，代碼更加簡單明了。?他們擁有一些類似的功能特性，如:
1)使用了一個(gè)虛擬 DOM
2) 提供了響應(yīng)式的，并且可組合式的視圖組件。
3) 保持對(duì)核心庫的專注, 而像路由和全局狀態(tài)管理這樣的關(guān)注點(diǎn)則交給附帶的庫來處理。
Vue和React都應(yīng)用了雙向數(shù)據(jù)綁定，Vue.js 中的雙向數(shù)據(jù)綁定在你使用了 v-model 時(shí)就會(huì)相當(dāng)?shù)暮唵?。而?React 中, 過程就比較漫長了。Vue.js 更容易上手操作，而且可以快速形成生產(chǎn)力。它還提供了一條途徑，使用新的工具和模式來簡化大型代碼庫的管理工作。
Vue中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個(gè)自給自足的獨(dú)立單元 —— 有自己的視圖和數(shù)據(jù)邏輯。
在數(shù)據(jù)渲染方面.Angular依賴對(duì)數(shù)據(jù)做臟檢查，所以Watcher越多越慢。Vue.js使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新。所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的。根據(jù)此次項(xiàng)目為后臺(tái)管理系統(tǒng)，擁有相對(duì)多的數(shù)據(jù)流來說，這個(gè)優(yōu)化差異還是比較明顯的。React依賴Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM會(huì)對(duì)渲染出來的結(jié)果做臟檢查，而
Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM，渲染速度也是非常迅速。
ElementUI組件是餓了么公司基于Vue開發(fā)的一套UI組件庫，應(yīng)用廣泛，維護(hù)的人數(shù)較多，，是現(xiàn)今比較主流的UI框架之一，bootstrap風(fēng)格，考慮到穩(wěn)定性，遇到問題相對(duì)容易解決，UI框架選用ElementUI組件。
我用的是Vue-cli和ElemenUI組件庫
那最基本的Node環(huán)境就不用我說了吧~
傳送門在這里自己看著配吧：http://www.runoob.com/nodejs/...
好了，開始項(xiàng)目搭建了
首先當(dāng)然是安裝一個(gè)vue了
# 最新穩(wěn)定版 $ npm install vue
然后全局安裝vue-cli官方命令行工具
$ npm install --global vue-cli # 用webpack構(gòu)建一個(gè)你自己的項(xiàng)目啦 $ vue init webpack 項(xiàng)目名字
然后做一些配置啦，例如什么name,version,description都是項(xiàng)目的一些相關(guān)文件
然后進(jìn)入對(duì)應(yīng)項(xiàng)目目錄，安裝依賴
$ cd 項(xiàng)目目錄 $ npm install
當(dāng)然也可以替換成國內(nèi)鏡像，用cnpm安裝依賴
# 啟動(dòng)項(xiàng)目 $ npm run dev
let us go，開始搞目錄
1.node_modules為項(xiàng)目依賴組件庫，可以再此引入第三方組件。
2.build為項(xiàng)目編譯為線上項(xiàng)目的配置組件。
3.config為項(xiàng)目webpack配置文件。
4.dis為項(xiàng)目線上文件，通過build編譯而成。
5.screenshots為UI圖，不加入build范圍，方便本地校對(duì)。
6.src為項(xiàng)目主要組件，assets是一些背景圖片目錄，common為通用組件目錄，page是給一個(gè)功能組件目錄。
7.router是vue路由跳轉(zhuǎn)配置文件目錄。
8.static為項(xiàng)目靜態(tài)資源目錄。為build項(xiàng)目預(yù)留。
其實(shí)個(gè)人感覺通用項(xiàng)目目錄可以很隨意的搭配，比如說install 之后清空src目錄
api封裝通用組件，像是jsonp啊，滑動(dòng)常用組件。
common是通用css樣式庫啦，封裝reset.css之類的樣式，或者js啦
根據(jù)個(gè)人喜好，分配不同的項(xiàng)目，這也是vue項(xiàng)目靈活的一種體現(xiàn)~
好了差不多了，吃飯去了，撒有哪啦
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/88569.html
vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構(gòu)建的移動(dòng)端單頁微應(yīng)用，適合于vue2、vuex、vue-router核心概念的理解與掌握。 前言 做這個(gè)項(xiàng)目的初衷其實(shí)很簡單，我司之前一直用angular、react進(jìn)行PC端項(xiàng)目的開發(fā)，但是最近新開展了一些項(xiàng)目打算用vue來做移動(dòng)端的開發(fā)(緊跟大廠的步伐?...
vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構(gòu)建的移動(dòng)端單頁微應(yīng)用，適合于vue2、vuex、vue-router核心概念的理解與掌握。 前言 做這個(gè)項(xiàng)目的初衷其實(shí)很簡單，我司之前一直用angular、react進(jìn)行PC端項(xiàng)目的開發(fā)，但是最近新開展了一些項(xiàng)目打算用vue來做移動(dòng)端的開發(fā)(緊跟大廠的步伐?...
vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構(gòu)建的移動(dòng)端單頁微應(yīng)用，適合于vue2、vuex、vue-router核心概念的理解與掌握。 前言 做這個(gè)項(xiàng)目的初衷其實(shí)很簡單，我司之前一直用angular、react進(jìn)行PC端項(xiàng)目的開發(fā)，但是最近新開展了一些項(xiàng)目打算用vue來做移動(dòng)端的開發(fā)(緊跟大廠的步伐?...
閱讀 1427·2023-04-25 23:47
閱讀 985·2021-11-23 09:51
閱讀 4727·2021-09-26 10:17
閱讀 3796·2021-09-10 11:19
閱讀 3316·2021-09-06 15:10
閱讀 3603·2019-08-30 12:49
閱讀 2500·2019-08-29 13:20
閱讀 1788·2019-08-28 18:14
