? ? ? 開發(fā)一個(gè)項(xiàng)目终畅，采用什么語言都可以籍胯，主要能熟練高效的開發(fā)都是合理的，這次我們采用vue來開發(fā)一個(gè)團(tuán)隊(duì)項(xiàng)目离福。在開始之前掌握vue的基本用法杖狼，如雙向數(shù)據(jù)綁定、組件和路由等妖爷，建議先去看之前的文檔（webpack的基本使用.doc蝶涩、利用vue-cli快速創(chuàng)建項(xiàng)目.doc、利用webpack+vue-loader搭建單組件應(yīng)用.doc絮识、如何在vs2010下利用webpack和vue-loader開發(fā)項(xiàng)目.doc绿聘、如何在vs2010下利用vue-cli和element-ui開發(fā)項(xiàng)目.doc）。
????????本次開發(fā)的項(xiàng)目是新聞稿管理系統(tǒng)次舌，開發(fā)工具為vs2010熄攘，數(shù)據(jù)庫為sqlserver2008，采用wcf作為中間層彼念。
1挪圾、vs2010創(chuàng)建空白項(xiàng)目
2、cmd中初始化項(xiàng)目
????????打開vs2010創(chuàng)建項(xiàng)目的目錄逐沙，進(jìn)入命令窗口
????????利用vue-cli初始化項(xiàng)目（關(guān)于vue-cli的使用前面有一個(gè)文檔介紹）
????????在當(dāng)前目錄創(chuàng)建一個(gè)webpack-simple項(xiàng)目哲思，按照提示一步一步往下配置即可（特別注意項(xiàng)目包名不能包含大寫字母）
????????查看項(xiàng)目目錄，發(fā)現(xiàn)多了工程文件和webpack配置文件
3吩案、VS2010項(xiàng)目中包含所需文件
????????在上一步中棚赔，項(xiàng)目生成了幾個(gè)文件，我們先把應(yīng)該包含在項(xiàng)目內(nèi)的資源包含起來（主要是index.html徘郭、pageage.json忆嗜、src和webpack.config.js），這時(shí)候留意一下工程文件：
????????這時(shí)候已經(jīng)把最基本的模塊依賴配置好了崎岂，這比自己搭建快了很多。注意端口信息闪湾，默認(rèn)8080冲甘，如果被占用了修改dev語句即可，如下：
?"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8080"
4途样、cmd安裝默認(rèn)組件（安裝依賴）
????????腳手架比自己搭建快就快在可以一鍵安裝默認(rèn)模塊江醇，不用一個(gè)一個(gè)的去安裝（npm install命令會根據(jù)工程文件自動去安裝所需模塊，網(wǎng)速慢的童鞋可以考慮cnpm）
5何暇、繼續(xù)安裝所需模塊
????????到目前為止所安裝的模塊都是自動安裝的陶夜，開發(fā)一個(gè)項(xiàng)目，除了那些遠(yuǎn)遠(yuǎn)不夠裆站，我們接下來還要安裝其他模塊条辟，比如路由黔夭，資源和element-ui等。本次開發(fā)所需模塊全部列在下方羽嫡，建議先安裝本姥。
? ??????????????????模塊? ??????????????????安裝方式????????????????? ??????????類型? ??????????????????????????????????描述? ??????
????????????????element-ui??????????????手動安裝? ????????? ? ? ? ?dependencies????????????????????????????????ui庫
? ? ? ? ? ? ? ? ? ? ? vue? ? ? ? ? ? ? ? ? ?默認(rèn)安裝????????????????????dependencies? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?vue庫
????????????????vue-resource? ? ? ? ? 手動安裝????????????????????dependencies? ? ? ? ? ? ? ? ? ? ? ? 獲取動態(tài)數(shù)據(jù)
? ? ? ? ? ? ? ? ? ?vue-router????????????手動安裝????????????????????dependencies????????????????????????????????路由
? ? ? ? ? ? ? ? ? babel-core????????????默認(rèn)安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ? ? ? js相關(guān)
? ? ? ? ? ? ? ? ?babel-loader? ? ? ? ? 默認(rèn)安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ? ? ? ?js相關(guān)
? ? ? ? ? ? babel-preset-env????????默認(rèn)安裝????????????????????devDependencies????????????????????????????js相關(guān)
????????????????cross-env????????????????默認(rèn)安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ? ? 底層相關(guān)
? ? ? ? ? ? ? ?css-loader????????????????默認(rèn)安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ? css加載器
????????????????file-loader????????????????默認(rèn)安裝????????????????????devDependencies????????????????????文件加載器
????????????font-awesome????????????手動安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????????????字體圖標(biāo)
????????????highcharts? ? ? ? ? ? ? ? ? 手動安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????????????圖表
? ? ? ? ? ? ?js-md5? ? ? ? ? ? ? ? ? ? ? ?手動安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????md5加密解密
????????????node-sass????????????????????默認(rèn)安裝????????????????????devDependencies????????????????????????????sass
? ? ? ? ? ? sass-loader????????????????默認(rèn)安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????sass加載器
????????vue-html5-editor????????????手動安裝? ? ? ? ? ? ? ? ? ? ? ?devDependencies? ? ? ? ? ? ? ? ? ? vue富文本
????????????vue-loader????????????????默認(rèn)安裝????????????????????????devDependencies????????????????????vue加載器
? ?vue-template-compiler????????默認(rèn)安裝????????????????????devDependencies????????????????vue模板加載器
????????wangeditor????????????????????手動安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????????富文本
????????????webpack????????????????????默認(rèn)安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????????webpack
????webpack-dev-server????????默認(rèn)安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ?webpack服務(wù)
????????安裝依賴完后，項(xiàng)目文件如下：
6杭棵、搭建基本框架
????????不管怎么樣婚惫，頁面入口為index.html，js文件為build.js魂爪，而build.js文件是打包后的文件先舷，打包入口文件在webpack.config中配置。我們這次的入口文件為src文件夾下的main.js文件滓侍，webpack打包時(shí)會自動查找所需模塊并進(jìn)行打包蒋川，下面是webpack.config的基本配置：
????????這里最重要的說打包入口文件為當(dāng)前目錄下的src文件夾下的main.js文件，打包后的目標(biāo)文件為當(dāng)前目錄下dist文件夾下的build.js文件粗井。
????????接下來先到index.html中引入build.js文件：
????????再接下來配置main.js：
????????在main.js中我們要導(dǎo)入一些必須模塊尔破，比如vue、vue-route浇衬、vue-resource和element-ui等懒构，同時(shí)為了方便我們把路由配置獨(dú)立成一個(gè)文件，組件加載放在路由配置文件中耘擂，同時(shí)為了調(diào)試方便胆剧，添加一個(gè)debug.config.js文件∽碓總的配置如下：
????????上面配置分為五部分：
? ? ? ? 第一部分：加載組件或文件
????????采用import（的方式加載文件秩霍，如下：或Require）
? ????????????????組件/文件? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述
????????????debug.config.js????????????????????????????????????????????????調(diào)試配置文件（自定義）
? ? ? ?javascript.common.js????????????????????????????????????????????通用js方法（插件、自定義）
? ? ? ? ? ? ? ? ? ? ? vue????????????????????????????????????????????????????????????????????????vue庫
????????????????vue-route????????????????????????????????????????????????????????????????????????路由
????????????vue-resource? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?獲取資源（ajax庫蚁阳，也可以使用vue-axios）
????????????????element-ui????????????????????????????????????????????????????????????????????ui庫
????????????????route-config.js????????????????????????????????????????????????????????路由配置（自定義铃绒，重要）
? ? ? ? ? ?component.config.js? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 全局組件加載配置（自定義）
????????????vue-html-editor? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?vue富文本
????????第二部分：use部分
????????讓vue掛載上面的模塊，如路由等
????????第三部分：配置路由
????????路由配置是一個(gè)很重要的文件螺捐，里面加載了全部的vue組件颠悬，這里展開，反正RouterConfig["default"].routes是一個(gè)數(shù)組定血。
????????第四部分：定義全局組件
????????這里定義全局組件赔癌，同時(shí)組件配置也很重要，先不展開ComponentConfig["default"].components也是一個(gè)數(shù)組澜沟。
????????第五部分：實(shí)例化vue
????????以index.html下id為backendApp的元素為vue的作用域（注意computed下的radom灾票，其作用是防止路由不跳轉(zhuǎn)。）
此時(shí)main.js開發(fā)完成茫虽，我們繼續(xù)完善index.html
????????index.html中導(dǎo)入element-ui的css庫（當(dāng)然可以通過webpack打包刊苍，不過那樣有點(diǎn)麻煩）既们、字體圖標(biāo)（先安裝font-awesome模塊在從node_modules中復(fù)制相應(yīng)文件出來）和build.js。然后在backendApp下添加路由視圖班缰，同時(shí)為了防止視圖不刷新贤壁，強(qiáng)制加上隨機(jī)key。
7埠忘、調(diào)試配置文件debug.config.js的配置
????????因?yàn)閣ebpack熱啟動端口與獲取數(shù)據(jù)端口往往不一樣（跨域）脾拆，如果在每個(gè)請求前都認(rèn)為與加域名端口改起來將相當(dāng)麻煩，所以我們在全局作用域下配置兩個(gè)參數(shù)莹妒，一個(gè)是IS_DEBUG(是否處于調(diào)試模式)名船、一個(gè)是HTTP_PORT(獲取動態(tài)數(shù)據(jù)的前綴),開發(fā)時(shí)只需要在請求前加上HTTP_PORT即可完成切換，調(diào)試轉(zhuǎn)部署也只需修改IS_DEBUG即可
global.IS_DEBUG = true;
global.HTTP_PORT = global.IS_DEBUG ? "http://127.0.0.1:59189/" : "";
PS：跨域的解決方法有很多旨怠，這只是其中一個(gè)思路渠驼，比較通用的是在請求頭中帶上token。
PS：global是webpack下的一個(gè)全局作用域
8鉴腻、通用js方法javascript.common.js的配置
????????具體代碼還是以前的common代碼迷扇，只是改為webpack下的全局而已
9、路由配置route-config.js（重點(diǎn)爽哎，現(xiàn)在是寫死的路由）
????????項(xiàng)目中開發(fā)的vue文件是在路由配置文件中加載的蜓席，其詳細(xì)信息如下：
????????代碼分為兩部分
????????第一部分：加載vue組件
????????比如var?Login = require("../components/Login/Login.vue");這句話是說加載Login.vue組件（vue單組件，后續(xù)介紹）
? ? ? ? 第二部分：路由使用組件
????????比如{ path: "/login", component: Login, hidden: true?}這里是說當(dāng)路由為login的時(shí)候课锌，使用的組件為Login
????????其中path代表路徑（路由狀態(tài)）厨内、component代表組件、hidden和name渺贤、iconCls等為自定義屬性雏胃。
當(dāng)新增加一個(gè)頁面時(shí)，先開發(fā)好vue單組件志鞍，然后在route-config.js加載瞭亮，最后配置其路由即可。
10固棚、component.config.js組件加載配置
????????當(dāng)需要自定義全局組件時(shí)街州，在component.config.js中配置：
????????同樣分為兩部分，第一部分加載vue組件玻孟，第二部分配置components數(shù)組
11、開發(fā)登錄頁面
????????至此鳍征，前臺的基本框架已經(jīng)基本介紹完了（后臺后續(xù)介紹）黍翎，現(xiàn)在開始正式開發(fā)項(xiàng)目。接下來開發(fā)登錄頁面。
????????先在components文件夾下創(chuàng)建Login文件夾稿黄，然后在該文件夾下分別創(chuàng)建Login.vue堪旧、Login.vue.css和Login.vue.js（也可以把三個(gè)文件合并成一個(gè).vue文件）三個(gè)文件內(nèi)容如下：
PS：VS2010對vue支持不好袍患，會把Vue文件解析成xml文件蚕礼，只好拆分文件
????????在Login.vue通過style標(biāo)簽和script標(biāo)簽加載相應(yīng)的css和js丐黄，為了方便其實(shí)可以把css和js直接寫在.vue里面澎迎，但是vs2010對vue的支持不好乱投，分開更好開發(fā)送爸。
????????其中js里面的this.$http.get(HTTP_PORT + "Server/Msg/MsgStart.ashx?method=Backend_Loginout");表示通過ajax去請求后臺一般處理程序铛嘱，HTTP_PORT為前面說過的全局http前綴。
????????當(dāng)Login.vue開發(fā)好后袭厂，去路由配置文件中加載Login.vue墨吓，然后配置相應(yīng)路由，即可在頁面中查看到效果纹磺。
var?Login = require("../components/Login/Login.vue");
{ path: "/login", component: Login, hidden: true?}
????????效果如下：
12帖烘、登錄后臺配置
????????使用一般處理程序，大體內(nèi)容和以前寫法一樣橄杨，只是要特別注意關(guān)于跨域問題秘症，因?yàn)閣ebpack熱啟動的端口與vs2010的啟動端口不一致，調(diào)用接口時(shí)會存在跨域式矫。
????????跨域的解決有多種辦法乡摹，這里做服務(wù)器端的修改，第一個(gè)方式是在web.config下配置允許跨域衷佃，趟卸，第二種方式是在ashx中直接設(shè)置允許跨域。不過第一種方式?jīng)]起作用氏义，所以做了第二種方式锄列，代碼如下：
????????第二個(gè)需要注意的問題是session在跨域前提下無法共享的問題，沒辦法惯悠，只能暫時(shí)用cache代替邻邮，打包部署前再換回session
13、開發(fā)Home.vue
????????前面已經(jīng)開發(fā)登錄頁面克婶，接下來開發(fā)登錄后的主頁面Home.vue筒严。Home.vue是該項(xiàng)目的主要頁面，其分為三部分情萤，頂部是信息條鸭蛙，左邊是菜單欄，右邊是具體頁面筋岛。
????????同樣也是在components文件夾下創(chuàng)建Home文件夾娶视，然后在該文件夾下分別創(chuàng)建Home.vue、Home.vue.css和Home.vue.js
????????具體代碼如下：
????????這里主要是設(shè)置個(gè)人中心、菜單和子視圖肪获，同時(shí)加上登錄判斷寝凌。最后去路由配置文件中添加相應(yīng)配置。
14孝赫、開發(fā)控制臺Main.vue
?????????Main.vue為該管理系統(tǒng)的首頁较木，先看效果
????????還是和前面創(chuàng)建vue組件流程一樣，新建Main.vue相應(yīng)文件后青柄，其具體內(nèi)容如下：
????????然后去路由配置文件中配置相關(guān)信息伐债，如下：
var?Main = require("../components/Main/Main.vue");
{ path: "/main", component: Main, hidden: true, name: "控制臺"?}
15、開發(fā)通用列表詳情頁面
????????管理系統(tǒng)中非常常見的一個(gè)頁面是列表頁面刹前，這里介紹一個(gè)示范頁面泳赋。
????????以用戶管理頁面為例，配置流程和前面一樣喇喉，下面詳細(xì)介紹js部分：
????????因?yàn)樯婕懊艽a加密祖今，所以要引入md5
屬性/方法 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??描述
validateEmail ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 驗(yàn)證email
validatePhone ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?驗(yàn)證phone
selection ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?列表選中項(xiàng)
records????????????????????????????????????????????????????????列表數(shù)據(jù)源
tableParam ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?表格參數(shù)（分頁和查詢等）
recordForm ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?記錄表單
userformRules????????????????????????????????????????????表單驗(yàn)證
uploadAction????????????????????????????????????????????????頭像上傳路徑
created????????????????????????????????????????????????????????鉤子（創(chuàng)建完成時(shí)觸發(fā)）
query ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 根據(jù)表格參數(shù)獲取數(shù)據(jù)源
updateKeyCurrent ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 更新查詢字段
selectionChange ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?當(dāng)列表選擇變化時(shí)觸發(fā)
recordFormInit????????????????????????????????????????????表單初始化
currentChange????????????????????????????????????????????分頁查詢時(shí)觸發(fā)
sortChange????????????????????????????????????????????????列表排序變化時(shí)觸發(fā)
formatterDate????????????????????????????????????????????????日期格式化
beforeAvatarUpload????????????????????????????????????上傳頭像前觸發(fā)
handleAvatarSuccess????????????????????????????????上傳頭像完成后觸發(fā)
getUserInfo????????????????????????????????????????????????????獲取記錄詳情
delUserInfo????????????????????????????????????????????????????刪除記錄
batchDelete????????????????????????????????????????????????????批量刪除
insertUserInfo????????????????????????????????????????????????新增
updateUserInfo ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 更新
16、圖表開發(fā)
????????圖表采用hightcharts拣技，要先安裝hightcharts模塊千诬，這里已用戶分析頁面為例：
????????還是和前面開發(fā)流程一樣，下面是具體內(nèi)容
????????因?yàn)樾枰玫紿ightchare膏斤，所以加載hightchare（也可以在index.html獨(dú)立引入）
屬性/方法 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述
total????????????????????????????????????????????????????????????????????用戶總數(shù)
complete ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 完善數(shù)量
year ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 默認(rèn)注冊年份
genderCharts????????????????????????????????????????????????????性別圖表相關(guān)
completeCharts????????????????????????????????????????????????完善率圖表相關(guān)
roleCharts????????????????????????????????????????????????????????角色圖表相關(guān)
sourceCharts????????????????????????????????????????????????????用戶來源圖表相關(guān)
registerCharts ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?注冊趨勢圖表相關(guān)
created????????????????????????????????????????????????????????????鉤子（創(chuàng)建完成時(shí)觸發(fā)）
formatdata ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 時(shí)間格式化
buildCharts????????????????????????????????????????????????????創(chuàng)建圖表
_buildRegisterCharts????????????????????????????????????創(chuàng)建注冊趨勢圖表
17徐绑、富文本開發(fā)
18、啟動流程
19傲茄、打包流程
20、部署流程
????????先去調(diào)試配置文件中把IS_DEBUG改為false沮榜，然后把js代碼打包好盘榨，接著把build.js包含在項(xiàng)目中，最后把一般處理程序中跨域設(shè)置全部去掉蟆融，同時(shí)把cache改回session草巡，最后，生成發(fā)布包部署即可型酥。
????????至此山憨，vue最小項(xiàng)目搭建完成。更多代碼敬請關(guān)注我的碼云主頁：https://gitee.com/zhkumsg
