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