資訊專欄INFORMATION COLUMN
摘要：項目結(jié)構(gòu)公共資源公共資源全局樣式公共組件布局模擬數(shù)據(jù)項目模塊模塊模塊頁面模塊路由插件公共路由全局狀態(tài)公共方法主視圖主程設(shè)置靜態(tài)資源配置文件開發(fā)規(guī)范語義化命名使用駝峰式命名，文件命名不宜過長，路由的命名和文件命名保持一致。
背景
由于saas平臺即將開始，現(xiàn)在重新梳理前端架構(gòu)和開發(fā)規(guī)范，項目使用模塊化思想搭建，每個模塊都有自己都路由和方法，盡量做到刪除和添加模塊，不會對框架產(chǎn)生較大對影響。
技術(shù)棧本次項目繼續(xù)沿用vue框架和element-ui，以及其它一些插件。
主要：
vue 2.5.0 webapck 4.0.0 element-ui vuex axios
本次項目使用腳手架vue-cli 3.0 版本，webpack也基于4.0作為基礎(chǔ)框架開發(fā)，配置變動比較大，但是相比3.0簡潔明了了許多。
項目結(jié)構(gòu)├─ public 公共資源 ├─ src │ ├─ api 公共api │ ├─ assets 資源 │ ├─ └─ styles 全局樣式 │ ├─ components 公共組件 │ ├─ layout 布局 │ ├─ mock 模擬數(shù)據(jù) │ ├─ modular 項目模塊 │ │ ├─ home │ │ ├─└─ api 模塊api │ │ ├─└─ pages 模塊頁面 │ │ ├─└─ 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.語義化命名
使用駝峰式命名，文件命名不宜過長，路由的命名和文件命名保持一致。
2.文件目錄規(guī)范
不宜嵌套過多層文件，且不同模塊相同文件名應(yīng)保持一致，區(qū)分大小寫。
3.路由
用戶管理下有增改兩個功能，不使用彈框去做的前提下，假如說 add 和 update 對應(yīng)兩個路由是 /addUser，/updateUser。我們系統(tǒng)地址欄是這樣顯示的：
// 增加用戶 localhost:3030/addUser // 修改用戶 localhost:3030/updateUser?id=1
但是模塊多的話，就不容易區(qū)分，其實應(yīng)該這樣做：
// 增加用戶 localhost:3030/user/add // 修改用戶 localhost:3030/user/update?id=1
4.Vue 組件
關(guān)于 Vue 組件開發(fā)規(guī)范可以參考官方的風格指南
組件名以單詞大寫開頭駝峰 (PascalCase)
5.細節(jié)
組件中的字體圖標（icon）盡量不要用 png 圖片
使用兩個空格（space）進行縮進
Props 中的屬性聲明要明確類型
// incorrect
export default {
props: ["node", "size"]
}
// correct
export default {
props: {
node: Object, // 對象
size: [String, Number], // 兩種類型都可以
}
}
為v-for設(shè)置鍵值key,避免 v-if 和 v-for 用在一起使用。
每塊代碼快盡量加上注釋
...... ...
/**
*@desc 改變狀態(tài)
*@param id [String] 改變對象的id
*@param status [String] 改變對象的status
*@return config [Object] 配置對象
*/
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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99096.html
摘要：特意對前端學(xué)習資源做一個匯總，方便自己學(xué)習查閱參考，和好友們共同進步。 特意對前端學(xué)習資源做一個匯總，方便自己學(xué)習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...
摘要：前端開發(fā)規(guī)范之項目目錄架構(gòu)概述項目開發(fā)的目錄結(jié)構(gòu)保持一致，容易理解并方便構(gòu)建與管理，方便日后的維護和其他同事的閱讀。 前端開發(fā)規(guī)范之Vue項目目錄架構(gòu)概述Vue項目開發(fā)的目錄結(jié)構(gòu)保持一致，容易理解并方便構(gòu)建與管理，方便日后的維護和其他同事的閱讀。一、Vue目錄結(jié)構(gòu) showImg(https://segmentfault.com/img/bVbdFDv?w=558&h=423); 二、...
摘要：一前言本文主要針對編輯器是的項目進行代碼規(guī)范。因此對進行語法檢查的工具應(yīng)運而生，目前使用最為廣泛。這篇將講解如何將集成到我們的項目中。七總結(jié)在項目上使用實際上還算相對簡單的，但是對于什么都是半生半熟的知識技能的人來說還是花了點時間。 一、前言 本文主要針對編輯器是sublime的vue項目進行eslint代碼規(guī)范。 Javascript 是一門弱類型語言，所以語法檢查變得尤為重要。雖然...
摘要：把打包的目錄修改成生產(chǎn)環(huán)境需要的目錄。是域名的配置只要統(tǒng)一配置一項即可，方便。旨在增強團隊開發(fā)協(xié)作提高代碼質(zhì)量和打造開發(fā)基石的編碼規(guī)范，以下規(guī)范是團隊基本約定的內(nèi)容，必須嚴格遵循。 Vue作為前端三大框架之一，其已經(jīng)悄然成為主流，學(xué)會用vue相關(guān)技術(shù)來開發(fā)項目會相當輕松。 對于還沒學(xué)習或者還沒用過vue的初學(xué)者，基礎(chǔ)知識這里不作詳解，推薦先去相關(guān)官網(wǎng)，學(xué)習一下vue相關(guān)的基礎(chǔ)知識。 a...
摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。 初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項目骨架再在之基礎(chǔ)上進行個人修改。 什么是 CLI 命令行界面（英語：command-li...
閱讀 2821·2021-11-22 13:54
閱讀 2755·2021-10-14 09:42
閱讀 4153·2021-09-28 09:47
閱讀 2214·2021-09-03 10:28
閱讀 1255·2021-07-26 23:38
閱讀 2605·2019-08-30 15:54
閱讀 2688·2019-08-29 16:35
閱讀 1481·2019-08-29 15:42
