亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue開發(fā)規(guī)范

selfimpr / 2597人閱讀

摘要：項(xiàng)目結(jié)構(gòu)公共資源公共資源全局樣式公共組件布局模擬數(shù)據(jù)項(xiàng)目模塊模塊模塊頁(yè)面模塊路由插件公共路由全局狀態(tài)公共方法主視圖主程設(shè)置靜態(tài)資源配置文件開發(fā)規(guī)范語(yǔ)義化命名使用駝峰式命名，文件命名不宜過(guò)長(zhǎng)，路由的命名和文件命名保持一致。

背景

由于saas平臺(tái)即將開始，現(xiàn)在重新梳理前端架構(gòu)和開發(fā)規(guī)范，項(xiàng)目使用模塊化思想搭建，每個(gè)模塊都有自己都路由和方法，盡量做到刪除和添加模塊，不會(huì)對(duì)框架產(chǎn)生較大對(duì)影響。

技術(shù)棧

本次項(xiàng)目繼續(xù)沿用vue框架和element-ui，以及其它一些插件。
主要：

vue 2.5.0
webapck 4.0.0
element-ui
vuex
axios

本次項(xiàng)目使用腳手架vue-cli 3.0 版本，webpack也基于4.0作為基礎(chǔ)框架開發(fā)，配置變動(dòng)比較大，但是相比3.0簡(jiǎn)潔明了了許多。

項(xiàng)目結(jié)構(gòu) 
├─ public 公共資源
├─ src
│  ├─ api 公共api
│  ├─ assets 資源
│  ├─ └─ styles 全局樣式
│  ├─ components 公共組件
│  ├─ layout 布局
│  ├─ mock 模擬數(shù)據(jù)
│  ├─ modular 項(xiàng)目模塊
│  │  ├─ home 
│  │  ├─└─ api 模塊api
│  │  ├─└─ pages 模塊頁(yè)面
│  │  ├─└─ router 模塊路由
│  ├─ plugin 插件
│  ├─ router 公共路由
│  ├─ store 全局狀態(tài)
│  ├─ utils 公共方法
│  ├─ App.vue 主視圖
│  ├─ main.js 主程
│  └─ setting.js 設(shè)置
├─ static 靜態(tài)資源
├─ .browserslistrc
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ package.json
├─ README.md
└─ vue.config.js 配置文件
├─ yarn.lock
開發(fā)規(guī)范

1.語(yǔ)義化命名

使用駝峰式命名，文件命名不宜過(guò)長(zhǎng)，路由的命名和文件命名保持一致。

2.文件目錄規(guī)范

不宜嵌套過(guò)多層文件，且不同模塊相同文件名應(yīng)保持一致，區(qū)分大小寫。

3.路由

用戶管理下有增改兩個(gè)功能，不使用彈框去做的前提下，假如說(shuō) add 和 update 對(duì)應(yīng)兩個(gè)路由是 /addUser，/updateUser。我們系統(tǒng)地址欄是這樣顯示的：

// 增加用戶
localhost:3030/addUser
// 修改用戶
localhost:3030/updateUser?id=1

但是模塊多的話，就不容易區(qū)分，其實(shí)應(yīng)該這樣做：

// 增加用戶
localhost:3030/user/add
// 修改用戶
localhost:3030/user/update?id=1

4.Vue 組件

關(guān)于 Vue 組件開發(fā)規(guī)范可以參考官方的風(fēng)格指南

組件名以單詞大寫開頭駝峰 (PascalCase)

5.細(xì)節(jié)

組件中的字體圖標(biāo)（icon）盡量不要用 png 圖片

使用兩個(gè)空格（space）進(jìn)行縮進(jìn)

Props 中的屬性聲明要明確類型

// incorrect
export default {
  props: ["node", "size"]
}

// correct
export default {
  props: {
    node: Object, // 對(duì)象
    size: [String, Number], // 兩種類型都可以
  }
}

為v-for設(shè)置鍵值key,避免 v-if 和 v-for 用在一起使用。

每塊代碼快盡量加上注釋




/**
 *@desc  改變狀態(tài)
 *@param  id      [String]  改變對(duì)象的id
 *@param  status  [String]  改變對(duì)象的status
 *@return config  [Object]  配置對(duì)象
 */
changeStatus(id, status) {
  let self = this
    return config = {
    url: api.changeBannerStatus,
    loading: "loading",
    param: {
      banner_position_id: id,
      status: status
    }
  };

參考和引用地址：
騰訊規(guī)范文檔：http://alloyteam.github.io/Co...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99096.html

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • Vue項(xiàng)目目錄架構(gòu)

    摘要：前端開發(fā)規(guī)范之項(xiàng)目目錄架構(gòu)概述項(xiàng)目開發(fā)的目錄結(jié)構(gòu)保持一致，容易理解并方便構(gòu)建與管理，方便日后的維護(hù)和其他同事的閱讀。 前端開發(fā)規(guī)范之Vue項(xiàng)目目錄架構(gòu)概述Vue項(xiàng)目開發(fā)的目錄結(jié)構(gòu)保持一致，容易理解并方便構(gòu)建與管理，方便日后的維護(hù)和其他同事的閱讀。一、Vue目錄結(jié)構(gòu) showImg(https://segmentfault.com/img/bVbdFDv?w=558&h=423); 二、...

    王偉廷 評(píng)論0 收藏0

  • Vue項(xiàng)目中使用eslint的筆錄，編輯器采用sublime3

    摘要：一前言本文主要針對(duì)編輯器是的項(xiàng)目進(jìn)行代碼規(guī)范。因此對(duì)進(jìn)行語(yǔ)法檢查的工具應(yīng)運(yùn)而生，目前使用最為廣泛。這篇將講解如何將集成到我們的項(xiàng)目中。七總結(jié)在項(xiàng)目上使用實(shí)際上還算相對(duì)簡(jiǎn)單的，但是對(duì)于什么都是半生半熟的知識(shí)技能的人來(lái)說(shuō)還是花了點(diǎn)時(shí)間。 一、前言 本文主要針對(duì)編輯器是sublime的vue項(xiàng)目進(jìn)行eslint代碼規(guī)范。 Javascript 是一門弱類型語(yǔ)言，所以語(yǔ)法檢查變得尤為重要。雖然...

    劉明 評(píng)論0 收藏0

  • 基于vue+mint-ui的mobile-h5的項(xiàng)目說(shuō)明

    摘要：把打包的目錄修改成生產(chǎn)環(huán)境需要的目錄。是域名的配置只要統(tǒng)一配置一項(xiàng)即可，方便。旨在增強(qiáng)團(tuán)隊(duì)開發(fā)協(xié)作提高代碼質(zhì)量和打造開發(fā)基石的編碼規(guī)范，以下規(guī)范是團(tuán)隊(duì)基本約定的內(nèi)容，必須嚴(yán)格遵循。 Vue作為前端三大框架之一，其已經(jīng)悄然成為主流，學(xué)會(huì)用vue相關(guān)技術(shù)來(lái)開發(fā)項(xiàng)目會(huì)相當(dāng)輕松。 對(duì)于還沒(méi)學(xué)習(xí)或者還沒(méi)用過(guò)vue的初學(xué)者，基礎(chǔ)知識(shí)這里不作詳解，推薦先去相關(guān)官網(wǎng)，學(xué)習(xí)一下vue相關(guān)的基礎(chǔ)知識(shí)。 a...

    vboy1010 評(píng)論0 收藏0

  • 《從零構(gòu)建前后分離的web項(xiàng)目》實(shí)戰(zhàn) -5分鐘快速構(gòu)建炒雞規(guī)范的VUE項(xiàng)目骨架

    摘要：可以使用或來(lái)安裝我用來(lái)重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過(guò)度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個(gè)畫面，安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面（英語(yǔ)：command-li...

    qieangel2013 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<