? ? ? 開發(fā)一個(gè)項(xiàng)目，采用什么語(yǔ)言都可以，主要能熟練高效的開發(fā)都是合理的，這次我們采用vue來(lái)開發(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ù)庫(kù)為sqlserver2008，采用wcf作為中間層。

1、vs2010創(chuàng)建空白項(xiàng)目

創(chuàng)建ASP.NET空web應(yīng)用

2、cmd中初始化項(xiàng)目

????????打開vs2010創(chuàng)建項(xiàng)目的目錄，進(jìn)入命令窗口

shift+右鍵可以選擇快速進(jìn)入命令窗口

????????利用vue-cli初始化項(xiàng)目（關(guān)于vue-cli的使用前面有一個(gè)文檔介紹）

vue init webpack-simple

????????在當(dāng)前目錄創(chuàng)建一個(gè)webpack-simple項(xiàng)目，按照提示一步一步往下配置即可（特別注意項(xiàng)目包名不能包含大寫字母）

文檔結(jié)構(gòu)

????????查看項(xiàng)目目錄，發(fā)現(xiàn)多了工程文件和webpack配置文件

3、VS2010項(xiàng)目中包含所需文件

????????在上一步中，項(xiàng)目生成了幾個(gè)文件，我們先把應(yīng)該包含在項(xiàng)目?jī)?nèi)的資源包含起來(lái)（主要是index.html、pageage.json、src和webpack.config.js），這時(shí)候留意一下工程文件：

pageage.json

????????這時(shí)候已經(jīng)把最基本的模塊依賴配置好了，這比自己搭建快了很多。注意端口信息，默認(rèn)8080，如果被占用了修改dev語(yǔ)句即可，如下：

?"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8080"

4、cmd安裝默認(rèn)組件（安裝依賴）

????????腳手架比自己搭建快就快在可以一鍵安裝默認(rèn)模塊，不用一個(gè)一個(gè)的去安裝（npm install命令會(huì)根據(jù)工程文件自動(dòng)去安裝所需模塊，網(wǎng)速慢的童鞋可以考慮cnpm）

npm install

5、繼續(xù)安裝所需模塊

????????到目前為止所安裝的模塊都是自動(dòng)安裝的，開發(fā)一個(gè)項(xiàng)目，除了那些遠(yuǎn)遠(yuǎn)不夠，我們接下來(lái)還要安裝其他模塊，比如路由，資源和element-ui等。本次開發(fā)所需模塊全部列在下方，建議先安裝。

? ??????????????????模塊? ??????????????????安裝方式????????????????? ??????????類型? ??????????????????????????????????描述? ??????

---

????????????????element-ui??????????????手動(dòng)安裝? ????????? ? ? ? ?dependencies????????????????????????????????ui庫(kù)

? ? ? ? ? ? ? ? ? ? ? vue? ? ? ? ? ? ? ? ? ?默認(rèn)安裝????????????????????dependencies? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?vue庫(kù)

????????????????vue-resource? ? ? ? ? 手動(dòng)安裝????????????????????dependencies? ? ? ? ? ? ? ? ? ? ? ? 獲取動(dòng)態(tài)數(shù)據(jù)

? ? ? ? ? ? ? ? ? ?vue-router????????????手動(dòng)安裝????????????????????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????????????手動(dòng)安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????????????字體圖標(biāo)

????????????highcharts? ? ? ? ? ? ? ? ? 手動(dòng)安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????????????圖表

? ? ? ? ? ? ?js-md5? ? ? ? ? ? ? ? ? ? ? ?手動(dòng)安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????md5加密解密

????????????node-sass????????????????????默認(rèn)安裝????????????????????devDependencies????????????????????????????sass

? ? ? ? ? ? sass-loader????????????????默認(rèn)安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????sass加載器

????????vue-html5-editor????????????手動(dòng)安裝? ? ? ? ? ? ? ? ? ? ? ?devDependencies? ? ? ? ? ? ? ? ? ? vue富文本

????????????vue-loader????????????????默認(rèn)安裝????????????????????????devDependencies????????????????????vue加載器

? ?vue-template-compiler????????默認(rèn)安裝????????????????????devDependencies????????????????vue模板加載器

????????wangeditor????????????????????手動(dòng)安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????????富文本

????????????webpack????????????????????默認(rèn)安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????????webpack

????webpack-dev-server????????默認(rèn)安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ?webpack服務(wù)

---

????????安裝依賴完后，項(xiàng)目文件如下：

pageage.json

6、搭建基本框架

????????不管怎么樣，頁(yè)面入口為index.html，js文件為build.js，而build.js文件是打包后的文件，打包入口文件在webpack.config中配置。我們這次的入口文件為src文件夾下的main.js文件，webpack打包時(shí)會(huì)自動(dòng)查找所需模塊并進(jìn)行打包，下面是webpack.config的基本配置：

webpack.config.js

????????這里最重要的說(shuō)打包入口文件為當(dāng)前目錄下的src文件夾下的main.js文件，打包后的目標(biāo)文件為當(dāng)前目錄下dist文件夾下的build.js文件。

????????接下來(lái)先到index.html中引入build.js文件：

index.html

????????再接下來(lái)配置main.js：

????????在main.js中我們要導(dǎo)入一些必須模塊，比如vue、vue-route、vue-resource和element-ui等，同時(shí)為了方便我們把路由配置獨(dú)立成一個(gè)文件，組件加載放在路由配置文件中，同時(shí)為了調(diào)試方便，添加一個(gè)debug.config.js文件?？偟呐渲萌缦?#xff1a;

main.js

????????上面配置分為五部分：

? ? ? ? 第一部分：加載組件或文件

????????采用import （ 或Require） 的方式加載文件，如下：

? ????????????????組件/文件? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述

---

????????????debug.config.js????????????????????????????????????????????????調(diào)試配置文件（自定義）

? ? ? ?javascript.common.js????????????????????????????????????????????通用js方法（插件、自定義）

? ? ? ? ? ? ? ? ? ? ? vue????????????????????????????????????????????????????????????????????????vue庫(kù)

????????????????vue-route????????????????????????????????????????????????????????????????????????路由

????????????vue-resource? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?獲取資源（ajax庫(kù)，也可以使用vue-axios）

????????????????element-ui????????????????????????????????????????????????????????????????????ui庫(kù)

????????????????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

????????index.html中導(dǎo)入element-ui的css庫(kù)（當(dāng)然可以通過webpack打包，不過那樣有點(diǎn)麻煩）、字體圖標(biāo)（先安裝font-awesome模塊在從node_modules中復(fù)制相應(yīng)文件出來(lái)）和build.js。然后在backendApp下添加路由視圖，同時(shí)為了防止視圖不刷新，強(qiáng)制加上隨機(jī)key。

7、調(diào)試配置文件debug.config.js的配置

????????因?yàn)閣ebpack熱啟動(dòng)端口與獲取數(shù)據(jù)端口往往不一樣（跨域），如果在每個(gè)請(qǐng)求前都認(rèn)為與加域名端口改起來(lái)將相當(dāng)麻煩，所以我們?cè)谌肿饔糜蛳屡渲脙蓚€(gè)參數(shù)，一個(gè)是IS_DEBUG(是否處于調(diào)試模式)、一個(gè)是HTTP_PORT(獲取動(dòng)態(tài)數(shù)據(jù)的前綴),開發(fā)時(shí)只需要在請(qǐng)求前加上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è)思路，比較通用的是在請(qǐng)求頭中帶上token。

PS：global是webpack下的一個(gè)全局作用域

8、通用js方法javascript.common.js的配置

????????具體代碼還是以前的common代碼，只是改為webpack下的全局而已

javascript.common.js

9、路由配置route-config.js（重點(diǎn)，現(xiàn)在是寫死的路由）

????????項(xiàng)目中開發(fā)的vue文件是在路由配置文件中加載的，其詳細(xì)信息如下：

route-config.js

????????代碼分為兩部分

????????第一部分：加載vue組件

????????比如var?Login = require("../components/Login/Login.vue");這句話是說(shuō)加載Login.vue組件（vue單組件，后續(xù)介紹）

? ? ? ? 第二部分：路由使用組件

????????比如{ path: "/login", component: Login, hidden: true?}這里是說(shuō)當(dāng)路由為login的時(shí)候，使用的組件為L(zhǎng)ogin

????????其中path代表路徑（路由狀態(tài)）、component代表組件、hidden和name、iconCls等為自定義屬性。

當(dāng)新增加一個(gè)頁(yè)面時(shí)，先開發(fā)好vue單組件，然后在route-config.js加載，最后配置其路由即可。

10、component.config.js組件加載配置

????????當(dāng)需要自定義全局組件時(shí)，在component.config.js中配置：

component.config.js

????????同樣分為兩部分，第一部分加載vue組件，第二部分配置components數(shù)組

11、開發(fā)登錄頁(yè)面

????????至此，前臺(tái)的基本框架已經(jīng)基本介紹完了（后臺(tái)后續(xù)介紹），現(xiàn)在開始正式開發(fā)項(xiàng)目。接下來(lái)開發(fā)登錄頁(yè)面。

????????先在components文件夾下創(chuàng)建Login文件夾，然后在該文件夾下分別創(chuàng)建Login.vue、Login.vue.css和Login.vue.js（也可以把三個(gè)文件合并成一個(gè).vue文件）三個(gè)文件內(nèi)容如下：

Login.vue Login.vue.css Login.vue.js

PS：VS2010對(duì)vue支持不好，會(huì)把Vue文件解析成xml文件，只好拆分文件

????????在Login.vue通過style標(biāo)簽和script標(biāo)簽加載相應(yīng)的css和js，為了方便其實(shí)可以把css和js直接寫在.vue里面，但是vs2010對(duì)vue的支持不好，分開更好開發(fā)。

????????其中js里面的this.$http.get(HTTP_PORT + "Server/Msg/MsgStart.ashx?method=Backend_Loginout");表示通過ajax去請(qǐng)求后臺(tái)一般處理程序，HTTP_PORT為前面說(shuō)過的全局http前綴。

????????當(dāng)Login.vue開發(fā)好后，去路由配置文件中加載Login.vue，然后配置相應(yīng)路由，即可在頁(yè)面中查看到效果。

var?Login = require("../components/Login/Login.vue");

{ path: "/login", component: Login, hidden: true?}

????????效果如下：

登錄效果圖

12、登錄后臺(tái)配置

????????使用一般處理程序，大體內(nèi)容和以前寫法一樣，只是要特別注意關(guān)于跨域問題，因?yàn)閣ebpack熱啟動(dòng)的端口與vs2010的啟動(dòng)端口不一致，調(diào)用接口時(shí)會(huì)存在跨域。

????????跨域的解決有多種辦法，這里做服務(wù)器端的修改，第一個(gè)方式是在web.config下配置允許跨域，，第二種方式是在ashx中直接設(shè)置允許跨域。不過第一種方式?jīng)]起作用，所以做了第二種方式，代碼如下：

服務(wù)端設(shè)置允許跨域

????????第二個(gè)需要注意的問題是session在跨域前提下無(wú)法共享的問題，沒辦法，只能暫時(shí)用cache代替，打包部署前再換回session

session轉(zhuǎn)cache

13、開發(fā)Home.vue

????????前面已經(jīng)開發(fā)登錄頁(yè)面，接下來(lái)開發(fā)登錄后的主頁(yè)面Home.vue。Home.vue是該項(xiàng)目的主要頁(yè)面，其分為三部分，頂部是信息條，左邊是菜單欄，右邊是具體頁(yè)面。

????????同樣也是在components文件夾下創(chuàng)建Home文件夾，然后在該文件夾下分別創(chuàng)建Home.vue、Home.vue.css和Home.vue.js

????????具體代碼如下：

Home.vue Home.vue.css Home.vue.js

????????這里主要是設(shè)置個(gè)人中心、菜單和子視圖，同時(shí)加上登錄判斷。最后去路由配置文件中添加相應(yīng)配置。

14、開發(fā)控制臺(tái)Main.vue

?????????Main.vue為該管理系統(tǒng)的首頁(yè)，先看效果

Main.vue 控制臺(tái)

????????還是和前面創(chuàng)建vue組件流程一樣，新建Main.vue相應(yīng)文件后，其具體內(nèi)容如下：

Main.vue Main.vue.css Main.vue.js

????????然后去路由配置文件中配置相關(guān)信息，如下：

var?Main = require("../components/Main/Main.vue");

{ path: "/main", component: Main, hidden: true, name: "控制臺(tái)"?}

router.config.js

15、開發(fā)通用列表詳情頁(yè)面

????????管理系統(tǒng)中非常常見的一個(gè)頁(yè)面是列表頁(yè)面，這里介紹一個(gè)示范頁(yè)面。

elementui 列表展示 elementui 表單詳情展示

????????以用戶管理頁(yè)面為例，配置流程和前面一樣，下面詳細(xì)介紹js部分：

用戶維護(hù)頁(yè)面

????????因?yàn)樯婕懊艽a加密，所以要引入md5

屬性/方法 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??描述

validateEmail ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 驗(yàn)證email

validatePhone ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?驗(yàn)證phone

selection ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?列表選中項(xiàng)

records????????????????????????????????????????????????????????列表數(shù)據(jù)源

tableParam ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?表格參數(shù)（分頁(yè)和查詢等）

recordForm ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?記錄表單

userformRules????????????????????????????????????????????表單驗(yàn)證

uploadAction????????????????????????????????????????????????頭像上傳路徑

created????????????????????????????????????????????????????????鉤子（創(chuàng)建完成時(shí)觸發(fā)）

query ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 根據(jù)表格參數(shù)獲取數(shù)據(jù)源

updateKeyCurrent ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 更新查詢字段

selectionChange ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?當(dāng)列表選擇變化時(shí)觸發(fā)

recordFormInit????????????????????????????????????????????表單初始化

currentChange????????????????????????????????????????????分頁(yè)查詢時(shí)觸發(fā)

sortChange????????????????????????????????????????????????列表排序變化時(shí)觸發(fā)

formatterDate????????????????????????????????????????????????日期格式化

beforeAvatarUpload????????????????????????????????????上傳頭像前觸發(fā)

handleAvatarSuccess????????????????????????????????上傳頭像完成后觸發(fā)

getUserInfo????????????????????????????????????????????????????獲取記錄詳情

delUserInfo????????????????????????????????????????????????????刪除記錄

batchDelete????????????????????????????????????????????????????批量刪除

insertUserInfo????????????????????????????????????????????????新增

updateUserInfo ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 更新

16、圖表開發(fā)

????????圖表采用hightcharts，要先安裝hightcharts模塊，這里已用戶分析頁(yè)面為例：

圖表效果圖

????????還是和前面開發(fā)流程一樣，下面是具體內(nèi)容

Useranalysis.vue Useranalysis.vue.js

????????因?yàn)樾枰玫紿ightchare，所以加載hightchare（也可以在index.html獨(dú)立引入）

屬性/方法 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述

total????????????????????????????????????????????????????????????????????用戶總數(shù)

complete ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 完善數(shù)量

year ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 默認(rèn)注冊(cè)年份

genderCharts????????????????????????????????????????????????????性別圖表相關(guān)

completeCharts????????????????????????????????????????????????完善率圖表相關(guān)

roleCharts????????????????????????????????????????????????????????角色圖表相關(guān)

sourceCharts????????????????????????????????????????????????????用戶來(lái)源圖表相關(guān)

registerCharts ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?注冊(cè)趨勢(shì)圖表相關(guān)

created????????????????????????????????????????????????????????????鉤子（創(chuàng)建完成時(shí)觸發(fā)）

formatdata ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 時(shí)間格式化

buildCharts????????????????????????????????????????????????????創(chuàng)建圖表

_buildRegisterCharts????????????????????????????????????創(chuàng)建注冊(cè)趨勢(shì)圖表

17、富文本開發(fā)

百度富文本 Ueditor.vue 百度富文本 Ueditor.vue.js 百度富文本效果圖 Wangeditor.vue Wangeditor.vue.js Wangeditor 富文本效果圖 官方富文本 Vuehtml5editor.vue 官方富文本 Vuehtml5editor.vue.js 官方富文本效果圖

18、啟動(dòng)流程

npm run dev，運(yùn)行項(xiàng)目

19、打包流程

npm run ?build 打包成功

20、部署流程

????????先去調(diào)試配置文件中把IS_DEBUG改為false，然后把js代碼打包好，接著把build.js包含在項(xiàng)目中，最后把一般處理程序中跨域設(shè)置全部去掉，同時(shí)把cache改回session，最后，生成發(fā)布包部署即可。

????????至此，vue最小項(xiàng)目搭建完成。更多代碼敬請(qǐng)關(guān)注我的碼云主頁(yè)：https://gitee.com/zhkumsg

總結(jié)

以上是生活随笔為你收集整理的在VS2010下利用vue开发团队项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。