當前位置：首頁 > 前端技术 > vue >内容正文

vue

在VS2010下利用vue开发团队项目

發布時間：2024/1/8 vue 21 豆豆

生活随笔收集整理的這篇文章主要介紹了在VS2010下利用vue开发团队项目小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? ? 開發一個項目，采用什么語言都可以，主要能熟練高效的開發都是合理的，這次我們采用vue來開發一個團隊項目。在開始之前掌握vue的基本用法，如雙向數據綁定、組件和路由等，建議先去看之前的文檔（webpack的基本使用.doc、利用vue-cli快速創建項目.doc、利用webpack+vue-loader搭建單組件應用.doc、如何在vs2010下利用webpack和vue-loader開發項目.doc、如何在vs2010下利用vue-cli和element-ui開發項目.doc）。

????????本次開發的項目是新聞稿管理系統，開發工具為vs2010，數據庫為sqlserver2008，采用wcf作為中間層。

1、vs2010創建空白項目

創建ASP.NET空web應用

2、cmd中初始化項目

????????打開vs2010創建項目的目錄，進入命令窗口

shift+右鍵可以選擇快速進入命令窗口

????????利用vue-cli初始化項目（關于vue-cli的使用前面有一個文檔介紹）

vue init webpack-simple

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

文檔結構

????????查看項目目錄，發現多了工程文件和webpack配置文件

3、VS2010項目中包含所需文件

????????在上一步中，項目生成了幾個文件，我們先把應該包含在項目內的資源包含起來（主要是index.html、pageage.json、src和webpack.config.js），這時候留意一下工程文件：

pageage.json

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

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

4、cmd安裝默認組件（安裝依賴）

????????腳手架比自己搭建快就快在可以一鍵安裝默認模塊，不用一個一個的去安裝（npm install命令會根據工程文件自動去安裝所需模塊，網速慢的童鞋可以考慮cnpm）

npm install

5、繼續安裝所需模塊

????????到目前為止所安裝的模塊都是自動安裝的，開發一個項目，除了那些遠遠不夠，我們接下來還要安裝其他模塊，比如路由，資源和element-ui等。本次開發所需模塊全部列在下方，建議先安裝。

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

????????????????element-ui??????????????手動安裝? ????????? ? ? ? ?dependencies????????????????????????????????ui庫

? ? ? ? ? ? ? ? ? ? ? vue? ? ? ? ? ? ? ? ? ?默認安裝????????????????????dependencies? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?vue庫

????????????????vue-resource? ? ? ? ? 手動安裝????????????????????dependencies? ? ? ? ? ? ? ? ? ? ? ? 獲取動態數據

? ? ? ? ? ? ? ? ? ?vue-router????????????手動安裝????????????????????dependencies????????????????????????????????路由

? ? ? ? ? ? ? ? ? babel-core????????????默認安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ? ? ? js相關

? ? ? ? ? ? ? ? ?babel-loader? ? ? ? ? 默認安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ? ? ? ?js相關

? ? ? ? ? ? babel-preset-env????????默認安裝????????????????????devDependencies????????????????????????????js相關

????????????????cross-env????????????????默認安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ? ? 底層相關

? ? ? ? ? ? ? ?css-loader????????????????默認安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ? css加載器

????????????????file-loader????????????????默認安裝????????????????????devDependencies????????????????????文件加載器

????????????font-awesome????????????手動安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????????????字體圖標

????????????highcharts? ? ? ? ? ? ? ? ? 手動安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????????????圖表

? ? ? ? ? ? ?js-md5? ? ? ? ? ? ? ? ? ? ? ?手動安裝? ? ? ? ? ? ? ? ? ? ?devDependencies????????????????md5加密解密

????????????node-sass????????????????????默認安裝????????????????????devDependencies????????????????????????????sass

? ? ? ? ? ? sass-loader????????????????默認安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????sass加載器

????????vue-html5-editor????????????手動安裝? ? ? ? ? ? ? ? ? ? ? ?devDependencies? ? ? ? ? ? ? ? ? ? vue富文本

????????????vue-loader????????????????默認安裝????????????????????????devDependencies????????????????????vue加載器

? ?vue-template-compiler????????默認安裝????????????????????devDependencies????????????????vue模板加載器

????????wangeditor????????????????????手動安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????????富文本

????????????webpack????????????????????默認安裝? ? ? ? ? ? ? ? ? ? ? devDependencies????????????????????????webpack

????webpack-dev-server????????默認安裝????????????????????devDependencies? ? ? ? ? ? ? ? ? ? ?webpack服務

????????安裝依賴完后，項目文件如下：

pageage.json

6、搭建基本框架

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

webpack.config.js

????????這里最重要的說打包入口文件為當前目錄下的src文件夾下的main.js文件，打包后的目標文件為當前目錄下dist文件夾下的build.js文件。

????????接下來先到index.html中引入build.js文件：

index.html

????????再接下來配置main.js：

????????在main.js中我們要導入一些必須模塊，比如vue、vue-route、vue-resource和element-ui等，同時為了方便我們把路由配置獨立成一個文件，組件加載放在路由配置文件中，同時為了調試方便，添加一個debug.config.js文件。總的配置如下：

main.js

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

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

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

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

????????????debug.config.js????????????????????????????????????????????????調試配置文件（自定義）

? ? ? ?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掛載上面的模塊，如路由等

????????第三部分：配置路由

????????路由配置是一個很重要的文件，里面加載了全部的vue組件，這里展開，反正RouterConfig["default"].routes是一個數組。

????????第四部分：定義全局組件

????????這里定義全局組件，同時組件配置也很重要，先不展開ComponentConfig["default"].components也是一個數組。

????????第五部分：實例化vue

????????以index.html下id為backendApp的元素為vue的作用域（注意computed下的radom，其作用是防止路由不跳轉。）

此時main.js開發完成，我們繼續完善index.html

index.html

????????index.html中導入element-ui的css庫（當然可以通過webpack打包，不過那樣有點麻煩）、字體圖標（先安裝font-awesome模塊在從node_modules中復制相應文件出來）和build.js。然后在backendApp下添加路由視圖，同時為了防止視圖不刷新，強制加上隨機key。

7、調試配置文件debug.config.js的配置

????????因為webpack熱啟動端口與獲取數據端口往往不一樣（跨域），如果在每個請求前都認為與加域名端口改起來將相當麻煩，所以我們在全局作用域下配置兩個參數，一個是IS_DEBUG(是否處于調試模式)、一個是HTTP_PORT(獲取動態數據的前綴),開發時只需要在請求前加上HTTP_PORT即可完成切換，調試轉部署也只需修改IS_DEBUG即可

global.IS_DEBUG = true;

global.HTTP_PORT = global.IS_DEBUG ? "http://127.0.0.1:59189/" : "";

PS：跨域的解決方法有很多，這只是其中一個思路，比較通用的是在請求頭中帶上token。

PS：global是webpack下的一個全局作用域

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

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

javascript.common.js

9、路由配置route-config.js（重點，現在是寫死的路由）

????????項目中開發的vue文件是在路由配置文件中加載的，其詳細信息如下：

route-config.js

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

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

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

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

????????比如{ path: "/login", component: Login, hidden: true?}這里是說當路由為login的時候，使用的組件為Login

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

當新增加一個頁面時，先開發好vue單組件，然后在route-config.js加載，最后配置其路由即可。

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

????????當需要自定義全局組件時，在component.config.js中配置：

component.config.js

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

11、開發登錄頁面

????????至此，前臺的基本框架已經基本介紹完了（后臺后續介紹），現在開始正式開發項目。接下來開發登錄頁面。

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

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

????????在Login.vue通過style標簽和script標簽加載相應的css和js，為了方便其實可以把css和js直接寫在.vue里面，但是vs2010對vue的支持不好，分開更好開發。

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

????????當Login.vue開發好后，去路由配置文件中加載Login.vue，然后配置相應路由，即可在頁面中查看到效果。

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

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

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

登錄效果圖

12、登錄后臺配置

????????使用一般處理程序，大體內容和以前寫法一樣，只是要特別注意關于跨域問題，因為webpack熱啟動的端口與vs2010的啟動端口不一致，調用接口時會存在跨域。

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

服務端設置允許跨域

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

session轉cache

13、開發Home.vue

????????前面已經開發登錄頁面，接下來開發登錄后的主頁面Home.vue。Home.vue是該項目的主要頁面，其分為三部分，頂部是信息條，左邊是菜單欄，右邊是具體頁面。

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

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

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

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

14、開發控制臺Main.vue

?????????Main.vue為該管理系統的首頁，先看效果

Main.vue 控制臺

????????還是和前面創建vue組件流程一樣，新建Main.vue相應文件后，其具體內容如下：

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

????????然后去路由配置文件中配置相關信息，如下：

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

{ path: "/main", component: Main, hidden: true, name: "控制臺"?}

router.config.js

15、開發通用列表詳情頁面

????????管理系統中非常常見的一個頁面是列表頁面，這里介紹一個示范頁面。

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

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

用戶維護頁面

????????因為涉及密碼加密，所以要引入md5

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

validateEmail ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 驗證email

validatePhone ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?驗證phone

selection ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?列表選中項

records????????????????????????????????????????????????????????列表數據源

tableParam ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?表格參數（分頁和查詢等）

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

userformRules????????????????????????????????????????????表單驗證

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

created????????????????????????????????????????????????????????鉤子（創建完成時觸發）

query ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 根據表格參數獲取數據源

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

selectionChange ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?當列表選擇變化時觸發

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

currentChange????????????????????????????????????????????分頁查詢時觸發

sortChange????????????????????????????????????????????????列表排序變化時觸發

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

beforeAvatarUpload????????????????????????????????????上傳頭像前觸發

handleAvatarSuccess????????????????????????????????上傳頭像完成后觸發

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

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

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

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

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

16、圖表開發

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

圖表效果圖

????????還是和前面開發流程一樣，下面是具體內容

Useranalysis.vue Useranalysis.vue.js

????????因為需要用到Hightchare，所以加載hightchare（也可以在index.html獨立引入）

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

total????????????????????????????????????????????????????????????????????用戶總數

complete ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 完善數量

year ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 默認注冊年份

genderCharts????????????????????????????????????????????????????性別圖表相關

completeCharts????????????????????????????????????????????????完善率圖表相關

roleCharts????????????????????????????????????????????????????????角色圖表相關

sourceCharts????????????????????????????????????????????????????用戶來源圖表相關

registerCharts ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?注冊趨勢圖表相關

created????????????????????????????????????????????????????????????鉤子（創建完成時觸發）

formatdata ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 時間格式化

buildCharts????????????????????????????????????????????????????創建圖表

_buildRegisterCharts????????????????????????????????????創建注冊趨勢圖表

17、富文本開發

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

18、啟動流程

npm run dev，運行項目

19、打包流程

npm run ?build 打包成功

20、部署流程

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

????????至此，vue最小項目搭建完成。更多代碼敬請關注我的碼云主頁：https://gitee.com/zhkumsg

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。