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