vue開發管理文檔規範

 

 

 

文檔管理

1.1 文檔信息

文檔名稱
保密級別		文檔版本編號
製做人		製做日期	2018.1.19
複審人		複審日期

1.2 修改記錄

時間	版本	說明	修改人

 

內容摘要

接手項目參考文檔，輔助入門。

 

目的

熟悉並掌握

l 智慧農業開發流程

l 智慧農業開發規範

l 經過作簡單的示例完成頁面流程的開發

前提條件

項目是用vue搭建的，前端vue打開項目是須要一個環境運行的。

1.3 軟件環境

一、 開發環境：node

 

開發規範

1、 目錄結構

一、H5頁面文件位於E:\webapp\xingyaokeji\intelligent_agr目錄下;

目錄結構

   ├── index.html                      入口頁面

    ├── build                           構建腳本目錄

    │   ├──build.js                        生產環境構建（編譯打包）腳本

    │   ├──check-versions.js             版本驗證工具

    │   ├──utils.js                        主要用來處理css類文件的loader

    │   ├──vue-loader.conf.js            處理vue中的樣式

    │   ├── webpack.base.conf.js         webpack基礎配置

    │   ├── webpack.dev.conf.js          webpack開發環境配置

    │   └── webpack.prod.conf.js          webpack生產環境配置

    ├── config                          項目配置

    │   ├── dev.env.js                      開發環境變量

    │   ├── index.js                        項目配置文件

    │   ├── prod.env.js                     生產環境變量

    │   └── test.env.js                     測試環境變量

    ├── dist                            打包好的項目

    │   ├── html                             靜態問件

    │   ├── conf                             nginx配置文件

    │   └── 其餘                              nginx須要的文件

    ├── node_modules                        項目依賴模塊    

    ├── src                             項目源碼目錄    

    │   ├── main.js                         入口js文件

    │   ├── app.vue                         根組件

    │   ├── components                     公共組件目錄

    │   ├── assets                          資源目錄，資源會被wabpack構建

    │   │   └── css                             第三方css文件，全局css文件

    │   │   └── font                            字體

    │   │   └── less                            全局less

    │   │   └── images                          圖片

    │   │       └── logo.png

    │   ├── routes                           前端路由

    │   │   └── index.js

    │   ├── pages                            前端頁面文件

    │   │   └── index.vue

    │   ├── vuex                             應用級數據（state）

    │   │   └── store.js                        分組數據存貯

    │   ├── service                          公共服務文件

    │   │   └── service.js                      處理公共請求，響應數據

    │   │   └── util.js                          處理公共js操做方法

    ├── static                          純靜態資源，不會被wabpack構建。

 

2、 文件名要求

文件名以小寫開頭，取有意義的英文名字，H5文件名與對應的JS文件名相同，命名以模塊名開頭加數字（該模塊第幾個文件），加一槓，之內容名結尾，如live1-ctrol.vue。

 

3、 文件格式

UTF-8格式

 

4、 頁面中id命名要求

除入口頁外，一個頁面就是一個Page，每一個Page有惟一ID，該ID命名以模塊名開頭加一槓，之內容名結尾，如login-wrap

 

5、 H5文件內容要求

一、功能模塊的入口頁，須要包含基本類庫，以及入口頁對應的JS腳本，其餘子頁面只有一個Page內容。

二、對沒有任何業務邏輯控制的頁面，能夠直接跳轉。

三、對於有業務邏輯控制的頁面，應綁定連接事件方式，在事件中須要顯示loading層，轉到目標頁面後，再隱藏loading層。

四、彈框、select等須要大量代碼去實現，要以組件的方式引入。

 

6、 JS內容要求

一、須要用請求和公共方法的文件，要用import引入：

import store from '@/vuex/store'

import {_SendData,_SendDataRes} from '@/service/service.js';

二、子組件引入方式：

A.公共組件常常使用如： header,footer等會一塊兒打包到公共js文件。

先import {xyHeader,xySide} from '@/components';

再暴露components: {xyHeader,xySide};

B.單獨組件，不是常常使用的，會單獨打包出來，須要引入本身加載出來。

   'xyDrowDown': () => import('component/drowDown.vue')    

三、暴露出去的部分，要按順序：

export default {

name: 'index',                                         名稱

components: {},                                        組件

data() {return{}},                                     數據

methods: {},                                           操做方法

watch: {'checkboxModel': {}},                          監聽

computed : {"val" : function() {return "123";}}        計算屬性

    beforeCreate: function () {},                         建立以前                         

    created: function () {},                              建立完成

    beforeMount: function () {},   掛載以前

    mounted: function () {},                              掛載完成                             

    beforeUpdate: function () {},                         更新以前

    updated: function () {},                              更新完成

    beforeDestroy: function () {},                        銷燬以前

    destroyed: function () {}                             銷燬完成

}

7、 Css要求

一、css用less寫，.vue以局部css來寫<style lang="less" scoped></style>只做用於當前vue文件。

二、遇到常常公用的，好比百分比計算，必定要寫在全局var.less裏面。

@theme：1800px;

.server-wrap>.footer{

bottom: @theme/24;

}

三、公共使用的css要單獨放在一個文件夾裏（less.css）。

8、 Css字體要求

1.網頁採用百度字蛛的方式，根據須要查詢加入字體。

 http://font-spider.org/

使用例子：

安裝完以後-到相應文件直接：font-spider index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'SourceHanSansCN-Light';
src: url('KaiGenGothicSC-Light.ttf');
/*src: url('src/css/font/SourceHanSansCN-Light.ttf');*/
/*src:*/
/*url('/src/css/font/KaiGenGothicSC-Light.eot?#font-spider') format('embedded-opentype'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.woff') format('woff'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.ttf') format('truetype'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.svg') format('svg');*/
font-weight: normal;
font-style: normal;
}
/*2.而後對元素正常使用font-family就能夠：*/

body{
font-family: 'SourceHanSansCN-Light';
}
</style>
</head>
<body>
<div>
核心團隊
</div>

</body>
</html>

接口請求

一、請求用Axios ，Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。

二、看後臺須要配置post、get請求，目前只用這兩種,一個是取一個是貼，只須要讀取文件，put（PUT 往服務器上上傳文件）、delect（刪除）直接對數據進行操做相對不安全 。

設計概要

一、sessionStorage存貯token

使用sessionStorage只存一個會話，當瀏覽器關閉從新打開輸入時會從新保存token。

二、登陸安全（雙重驗證）

前端路由驗證：首先全局路由攔截router.beforeEach，看sessionStorage是否存在驗證。

http請求和響應驗證：看後臺返回token是否過時，不過時就執行刪除sessionStorage 操做，並從新登陸。

 

....

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

頁面流程圖