構建Vue-cli通用項目目錄

寫在前面的我的體會，大神們能夠跳過

這段時間接手一個後臺管理項目，從最開始寫一點我本身的體會吧。
首先Vue，Angular和React是當今主流前端三大框架。Vue是一個用來構建網頁的JS庫，相比較Angular和React框架來講，Vue的出現雖然晚一些，可是他吸收了Angular和React的教訓，變得更爲靈活，不是非要根據框架的規定非要如此如此，更容易發展成爲公司本身的組件庫，轉換爲本身的體系。
Angular有許多工具，複雜的語法，Vue.js 比起 Angular 要簡單的多，甚至於要更好，代碼更加簡單明瞭。 他們擁有一些相似的功能特性，如:
1)使用了一個虛擬 DOM
2) 提供了響應式的，而且可組合式的視圖組件。
3) 保持對核心庫的專一, 而像路由和全局狀態管理這樣的關注點則交給附帶的庫來處理。
Vue和React都應用了雙向數據綁定，Vue.js 中的雙向數據綁定在你使用了 v-model 時就會至關的簡單。而在 React 中, 過程就比較漫長了。Vue.js 更容易上手操做，並且能夠快速造成生產力。它還提供了一條途徑，使用新的工具和模式來簡化大型代碼庫的管理工做。
Vue中指令和組件分得更清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 有本身的視圖和數據邏輯。
在數據渲染方面.Angular依賴對數據作髒檢查，因此Watcher越多越慢。Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新。全部的數據都是獨立觸發的。根據這次項目爲後臺管理系統，擁有相對多的數據流來講，這個優化差別仍是比較明顯的。React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果作髒檢查，而
Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做DOM，渲染速度也是很是迅速。
ElementUI組件是餓了麼公司基於Vue開發的一套UI組件庫，應用普遍，維護的人數較多，，是現今比較主流的UI框架之一，bootstrap風格，考慮到穩定性，遇到問題相對容易解決，UI框架選用ElementUI組件。

首先是環境的問題

我用的是Vue-cli和ElemenUI組件庫

那最基本的Node環境就不用我說了吧~
傳送門在這裏本身看着配吧：http://www.runoob.com/nodejs/...
好了，開始項目搭建了

首先固然是安裝一個vue了

# 最新穩定版
$ npm install vue

而後全局安裝vue-cli官方命令行工具

$ npm install --global vue-cli
# 用webpack構建一個你本身的項目啦
$ vue init webpack 項目名字

而後作一些配置啦，例如什麼name,version,description都是項目的一些相關文件

而後進入對應項目目錄，安裝依賴

$ cd 項目目錄
$ npm install

固然也能夠替換成國內鏡像，用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路由跳轉配置文件目錄。
8.static爲項目靜態資源目錄。爲build項目預留。

其實我的感受通用項目目錄能夠很隨意的搭配，好比說install 以後清空src目錄

api封裝通用組件，像是jsonp啊，滑動經常使用組件。
common是通用css樣式庫啦，封裝reset.css之類的樣式，或者js啦

根據我的喜愛，分配不一樣的項目，這也是vue項目靈活的一種體現~

好了差很少了，吃飯去了，撒有哪啦