當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

Vue开发规范1.0

發(fā)布時(shí)間：2025/3/20 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue开发规范1.0 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

VUE開(kāi)發(fā)規(guī)范-V1.0

前提條件

開(kāi)發(fā)環(huán)境：Node 開(kāi)發(fā)工具：推薦 WebStorm 同步工具：Git

注釋細(xì)則

// 注釋內(nèi)容表示解釋，/** 注釋內(nèi)容 */表示步驟說(shuō)明

注釋加載代碼行的上一行，不要加在代碼水平的后面

刪除不相關(guān)的注釋

頁(yè)面風(fēng)格細(xì)則

同一水平線(xiàn)的組件，確保風(fēng)格大致一直，比如：使用elementUI時(shí)，確保input、select等的size一致。

列表操作按鈕，確保顏色有區(qū)分（推薦刪除-紅色，編輯-藍(lán)色，查看-白色）

詳情、編輯、新增頁(yè)面，保存（或提交）按鈕與返回（或取消）按鈕顏色有區(qū)分（推薦保存-藍(lán)色，返回-白色）

CSS細(xì)則

css用less寫(xiě)，.vue以局部css來(lái)寫(xiě)<style lang="less" scoped></style>只作用于當(dāng)前vue文件，并寫(xiě)在當(dāng)前頁(yè)面底部。

遇到經(jīng)常公用的，需寫(xiě)在全局 global.less 里面。

網(wǎng)頁(yè)采用百度字蛛的方式，見(jiàn) http://font-spider.org/

接口請(qǐng)求細(xì)則

所有接口編寫(xiě)之前請(qǐng)與后端約定好接口文檔（接口名稱(chēng)、請(qǐng)求類(lèi)型、請(qǐng)求字段、返回?cái)?shù)據(jù)格式與字段）

使用axios進(jìn)行接口請(qǐng)求，axios只使用get、post，不得使用其他請(qǐng)求類(lèi)型，如有特殊情況，請(qǐng)與技術(shù)經(jīng)理討論后再?zèng)Q定

所有的接口需要在api.js中定義，不得直接寫(xiě)死在axios的url參數(shù)中

路由細(xì)則

1.路由間傳遞數(shù)據(jù)，只需要傳遞標(biāo)識(shí)數(shù)據(jù)，再在子路由重新請(qǐng)求后臺(tái)查詢(xún)數(shù)據(jù)

2.路由跳轉(zhuǎn)

From路由

# 跳轉(zhuǎn) this.storeMove({name: "departEdit",query: {"departId": this.infos.departId} });

To路由

# 獲取傳遞的參數(shù)，不支持對(duì)象 this.$route.query.departId

3.路由傳參

:departId="departId"

父路由

子路由

props: {departId: String },

axios使用方法

1、普通get請(qǐng)求

this.$axios({method: 'get',url: this.url,params: {...} }).then(res => {...}).catch(err => {...this.$log('錯(cuò)誤信息', err)})

注意：

使用 params: {}

2、普通post請(qǐng)求，后臺(tái)沒(méi)有@RequestBody

this.$axios({method: 'post',url: this.url,params: {...} }).then(res => {...}).catch(err => {...this.$log('錯(cuò)誤信息', err)})

注意

使用 params: {}
因?yàn)楹笈_(tái)沒(méi)有@RequestBody，則表示直接從params中讀取數(shù)據(jù)

3、post傳遞json，后臺(tái)有@RequestBody

this.$axios({method: 'post',url: this.url,data: {...},headers: {'content-type': 'application/json'} }).then(res => {...}).catch(err => {...this.$log('錯(cuò)誤信息', err)})

注意

使用 data: {}
追加headers -> 'content-type': 'application/json'

通用

代碼要加注釋

不要在頁(yè)面寫(xiě)死url，統(tǒng)一提取出來(lái)到某個(gè)文件（如namespace.js）

公共資源提取出來(lái)：圖片、顏色等

操作的時(shí)候加鎖（調(diào)ajax），防止重復(fù)點(diǎn)擊：查詢(xún)不嚴(yán)格要求，增刪改要寫(xiě)（防止重復(fù)操作）

ajax回調(diào)：微信端提示暫時(shí)都用alert（提取出來(lái)），PC端用餓了么的提示框，manager端用瞰聆的

success判斷code是否為0：為0代表成功，不為0失敗，取res.desc作為提示，code為0時(shí)，如果要取data里面的數(shù)據(jù)，一定先要一層一層判空以避免空指針，如res.data && res.data.id。
error代表網(wǎng)絡(luò)請(qǐng)求失敗，要給出提示“網(wǎng)絡(luò)請(qǐng)求失敗，請(qǐng)稍后再試！”，此時(shí)res為空。

每次改變搜索條件重新篩選的時(shí)候要記得把pageNo頁(yè)碼置為1

列表沒(méi)有數(shù)據(jù)時(shí)要提示“暫無(wú)數(shù)據(jù)”，根據(jù)具體場(chǎng)景提示

不相關(guān)的內(nèi)容不要寫(xiě)

需要解決的問(wèn)題

UI的比較與選擇

VUE全家桶

代碼結(jié)構(gòu)

├── index.html 入口頁(yè)面├── build 構(gòu)建腳本目錄│ ├──build.js 生產(chǎn)環(huán)境構(gòu)建（編譯打包）腳本│ ├──check-versions.js 版本驗(yàn)證工具│ ├──utils.js 主要用來(lái)處理css類(lèi)文件的loader│ ├──vue-loader.conf.js 處理vue中的樣式│ ├── webpack.base.conf.js webpack基礎(chǔ)配置│ ├── webpack.dev.conf.js webpack開(kāi)發(fā)環(huán)境配置│ └── webpack.prod.conf.js webpack生產(chǎn)環(huán)境配置├── config 項(xiàng)目配置│ ├── dev.env.js 開(kāi)發(fā)環(huán)境變量│ ├── index.js 項(xiàng)目配置文件│ ├── prod.env.js 生產(chǎn)環(huán)境變量│ └── test.env.js 測(cè)試環(huán)境變量├── dist 打包后的項(xiàng)目│ ├── html 靜態(tài)問(wèn)件│ ├── conf nginx配置文件│ └── 其他 nginx需要的文件├── node_modules 項(xiàng)目依賴(lài)模塊 ├── src 項(xiàng)目源碼目錄 │ ├── main.js 入口js文件│ ├── app.vue 根組件│ ├── components 公共組件目錄│ ├── assets 資源目錄│ │ └── css 全局css文件│ │ └── font 字體│ │ └── less 全局less│ │ └── images 圖片│ │ └── logo.png│ ├── router 前端路由配置│ │ └── index.js│ ├── mock 模擬數(shù)據(jù)文件│ │ └── register.js 模擬數(shù)據(jù)注冊(cè)│ ├── pages 前端頁(yè)面文件│ │ └── index.vue│ ├── plugin 插件文件│ │ └── axios 接口請(qǐng)求插件│ │ └── func 自定義方法插件集│ │ └── log 日志插件│ ├── vuex 應(yīng)用級(jí)數(shù)據(jù)（state）│ │ └── store.js 分組數(shù)據(jù)存貯├── static 純靜態(tài)資源，不會(huì)被wabpack構(gòu)建。

export代碼

export default {// 名稱(chēng)name: 'index', // 組件components: {}, // 數(shù)據(jù)data() {return{}}, // 操作方法methods: {}, // 監(jiān)聽(tīng)watch: {'checkboxModel': {}}, // 計(jì)算屬性computed : {"val" : function() {return "123";}} // 創(chuàng)建之前 beforeCreate: function () {}, // 創(chuàng)建完成created: function () {}, // 掛載之前beforeMount: function () {}, // 掛載完成 mounted: function () {}, // 更新之前beforeUpdate: function () {}, // 更新完成updated: function () {}, // 銷(xiāo)毀之前beforeDestroy: function () {}, // 銷(xiāo)毀完成destroyed: function () {} }

命名要求

文件名小寫(xiě)開(kāi)頭，采用駝峰方式

示例
apiMoni.vue
常量全部大寫(xiě)，并使用下劃線(xiàn)連接

示例
const MAX_COUNT = 10;
方法命名

待...

文件格式

UTF-8

事件

對(duì)沒(méi)有任何業(yè)務(wù)邏輯控制的頁(yè)面，可以直接跳轉(zhuǎn)
對(duì)于有業(yè)務(wù)邏輯控制的頁(yè)面，應(yīng)綁定鏈接事件方式，在事件中需要顯示loading層，轉(zhuǎn)到目標(biāo)頁(yè)面后，再隱藏loading層
彈框、select等需要大量代碼去實(shí)現(xiàn)，要以組件的方式引入

接口調(diào)用

請(qǐng)求使用Axios
請(qǐng)求方式使用GET與POST，不要使用其他方式

token 驗(yàn)證

1、sessionStorage存貯token,盡量少用localStorage

2、登錄安全（雙重驗(yàn)證）

前端路由驗(yàn)證：首先全局路由攔截router.beforeEach，看sessionStorage是否存在驗(yàn)證。
http請(qǐng)求和響應(yīng)驗(yàn)證：看后臺(tái)返回token是否過(guò)期，不過(guò)期就執(zhí)行刪除sessionStorage 操作，并重新登錄。

部署方式

工具

nginx

打包部署

打包項(xiàng)目：用cmd命令進(jìn)入到項(xiàng)目的根目錄，執(zhí)行指令npm run build，打包之后會(huì)在項(xiàng)目根目錄下面生成一個(gè)dist文件夾，然后把dist文件夾放到服務(wù)器上面。

配置nginx：修改nginx的配置文件nginx.conf，在http里面添加server，格式如下：

listen是端口號(hào)，
server_name是連接地址（域名或ip），
root指向打包后項(xiàng)目的物理路徑（到index.html的父目錄），保存文件，然后啟動(dòng)nginx。

server {listen 80;server_name www.xxx.com;location / { root /usr/local/vue/dist;autoindex on;} }

注意：在nginx使用過(guò)程中，如果用到上傳文件，通常需要設(shè)置nginx報(bào)文大小限制，在http里面添加一行代碼client_max_body_size 20m;

常見(jiàn)錯(cuò)誤以及解決方案

待...

尊重原創(chuàng)

https://my.oschina.net/gmarshal/blog/1923893

轉(zhuǎn)載于:https://my.oschina.net/gmarshal/blog/1923893

總結(jié)

以上是生活随笔為你收集整理的Vue开发规范1.0的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：动手理解Vue导航守卫
下一篇： 2，Spring-mvc添加参数校验：避