vue 开发规范
From: https://blog.csdn.net/qq_36263601/article/details/79854742
Vue組件化開發
??? 單文件系統，樣式局部作用域
??? 基本組成結構：<template/> <script/> <style scoped/>
??? 組件注冊方式：1）公共組件全局注冊 2）其余組件局部注冊
組件命名規范
Vue官方文檔給予以下說明：
??? 當注冊組件 (或者 prop) 時，可以使用 kebab-case (短橫線分隔命名)、camelCase (駝峰式命名) 或 PascalCase (單詞首字母大寫命名)。
??? PascalCase 是最通用的聲明約定而 kebab-case 是最通用的使用約定。
命名可遵循以下規則：
1. 有意義的名詞、簡短、具有可讀性
2. 以小寫開頭，采用短橫線分割命名
3. 公共組件命名以公司名稱簡拼為命名空間(app-xx.vue)
4. 文件夾命名主要以功能模塊代表命名
??? 同時還需要注意：必須符合自定義元素規范: 使用連字符分隔單詞，切勿使用保留字。app- 前綴作為命名空間: 如果非常通用的話可使用一個單詞來命名，這樣可以方便于其它項目里復用。
vue文件基本結構
<template>
??? <div>
??? <!--必須在div中編寫頁面-->
??? </div>
</template>
<script>
??? export default {
??? components : {
??? },
??? data () {
??????? return {
??????? }
??? },
??? methods: {
??? },
??? mounted() {
??? }
??? }
</script>
<!--聲明語言，并且添加scoped-->
<style lang="less" scoped>
</style>
??? 1
??? 2
??? 3
??? 4
??? 5
??? 6
??? 7
??? 8
??? 9
??? 10
??? 11
??? 12
??? 13
??? 14
??? 15
??? 16
??? 17
??? 18
??? 19
??? 20
??? 21
??? 22
??? 23
??? 24
vue 方法放置順序
??? components
??? props
??? data
??? created
??? mounted
??? activited
??? update
??? beforeRouteUpdate
??? metods
??? filter
??? computed
??? watch
注釋規范
??? 代碼注釋在一個項目的后期維護中顯的尤為重要，所以我們要為每一個被復用的組件編寫組件使用說明，為組件中每一個方法編寫方法說明。
以下情況，務必添加注釋
1. 公共組件使用說明
2. 各組件中重要函數或者類說明
3. 復雜的業務邏輯處理說明
4. 特殊情況的代碼處理說明,對于代碼中特殊用途的變量、存在臨界值、函數中使用的hack、使用了某種算法或思路等需要進行注釋描述
5. 注釋塊必須以/**（至少兩個星號）開頭**/；
- 組件使用說明，和調用說明
JavaScript
<!--公用組件：數據表格
/**
* 組件名稱
* @module 組件存放位置
*@desc 組件描述
*@author 組件作者
*@date 2017年12月05日17:22:43
*@param {Object} [title] - 參數說明
*@param {String} [columns] - 參數說明
*@example 調用示例
<hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
*/
-->
6. 單行注釋使用//；
- 普通方法一般使用單行注釋// 來說明該方法主要作用
編碼規范
優秀的項目源碼，即使是多人開發，看代碼也如出一人之手。統一的編碼規范，可使代碼更易于閱讀，易于理解，易于維護。盡量按照ESLint格式要求編寫代碼
1. 使用ES6風格編碼源碼
- 定義變量使用let ,定義常量使用const
- 使用export ，import 模塊化
2. 組件 props 原子化
- 提供默認值
- 使用 type 屬性校驗類型
- 使用 props 之前先檢查該 prop 是否存在
3. 避免 this.parent4.謹慎使用this.
refs
5. 無需將 this 賦值給 component 變量
6. 調試信息console.log() debugger 使用完及時刪除
method 自定義方法命名
??? 動賓短語（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）
??? ajax 方法以 get、post 開頭，以 data 結尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）
??? 事件方法以 on 開頭（onTypeChange、onUsernameInput）
??? init、refresh 單詞除外
??? 盡量使用常用單詞開頭（set、get、open、close、jump）
??? 駝峰命名（good: getListData）（bad: get_list_data、getlistData）
data props 方法注意點
??? 使用 data 里的變量時請先在 data 里面初始化
??? props 指定類型，也就是 type
??? props 改變父組件數據 基礎類型用 $emit ，復雜類型直接改
??? ajax 請求數據用上 isLoading、isError 變量
??? 不命名多余數據，現在是詳情頁、你的數據是 ajax 請求的，那就直接聲明一個對象叫 d，而不是每個字段都聲明
??? 表單數據包裹一層 form
生命周期方法注意點
??? 不在 mounted、created 之類的方法寫邏輯，取 ajax 數據，可以在 mounted 寫一個 getData 方法，去取接口數據，那樣這個接口可以復用
??? 在 created 里面監聽 Bus 事件
vue 開發 – axios
axios 掛載
??? 改寫原型鏈
??? 由于axios 并不能 use()引入，只能每個需要發送請求的組件中即時引入，所以在 main.js 中引入 axios
import axios from 'axios'
Vue.prototype.$ajax = axios
??? 1
??? 2
??? 添加了這兩行代碼之后，就能直接在組件的 methods 中使用 $ajax 命令
methods: {
? submitForm () {
??? this.$ajax({
????? method: 'post',
????? url: '/user',
????? data: {
??????? name: 'wise',
??????? info: 'wrong'
????? }
?? })
}
??? 1
??? 2
??? 3
??? 4
??? 5
??? 6
??? 7
??? 8
??? 9
??? 10
??? 11
axios 封裝
??? 在main.js 中加入
const get =? (url,params)=>{
? return new Promise((resolve, reject) => {
??? axios.get(url, {params:params})
????? .then(function (response) {
??????? resolve(response.data);
????? }).catch(err=>{})
? })
};
const post = (url,params)=>{
? return new Promise((resolve, reject) => {
??? axios.post(url, params)
????? .then(function (response) {
??????? resolve(response.data)
????? }).catch(err=>{})
? })
};
Vue.prototype.$api = api;
Vue.prototype.$get = get;
Vue.prototype.$post = post;
??? 1
??? 2
??? 3
??? 4
??? 5
??? 6
??? 7
??? 8
??? 9
??? 10
??? 11
??? 12
??? 13
??? 14
??? 15
??? 16
??? 17
??? 18
??? 19
??? 20
??? 21
在 .vue 頁面可以直接使用 this.get(url,params).then()和this.
post(url,params).then()
不需要再加 catch,如果需要特殊參數的請求 可以直接調用 this.axios.get();
使用 this.axios 時必須加上 catch
vue 開發 – vuex
??? ajax 判斷
??????? 首先 ajax 請求可以寫在 actions也可以直接寫在 .vue 頁面里;
??????? 我們判斷的依據是 回調是否需要調用頁面結構來區分,
??????? 比如在 .vue 頁面中 發送完請求后需要調用 this.$refs.element等,或者需要利用組件的獨立性的效果時 的那就寫在.vue頁面,否則就寫在 actions 里
??? ajax 調用
因為異步的原因,不能將 get,post掛載到 vuex 上面,
所以新增 fetch.js 頁面:
import axios from 'axios'
import api from './index.js'//api頁面
const get =? (url,params)=>{
? return new Promise((resolve, reject) => {
??? axios.get(url, {params:params})
????? .then(function (response) {
??????? resolve(response.data);
????? }).catch(err=>{})
? })
};
const post = (url,params)=>{
? return new Promise((resolve, reject) => {
??? axios.post(url, params)
????? .then(function (response) {
??????? resolve(response.data)
????? }).catch(err=>{})
? })
};
export {api,get,post};
在 vuex 頁面中引入:import {api,get} from '@/api/fetch.js'
即可發起請求:
??? getUser({commit}){
??????? get(api.info).then(data=>{
????????? commit('changeUser',data)
??????? })
??? }
?如有特殊需要可以新引入 axios 或者在 fetch 上在進行特殊的添加
??? 1
??? 2
??? 3
??? 4
??? 5
??? 6
??? 7
??? 8
??? 9
??? 10
??? 11
??? 12
??? 13
??? 14
??? 15
??? 16
??? 17
??? 18
??? 19
??? 20
??? 21
??? 22
??? 23
??? 24
??? 25
??? 26
??? 27
??? 28
??? 29
??? 30
??? 31
3 模塊
??? 按類型分類,將響應模塊的state,mutations,actions等分別寫在對應文件中,登錄,注冊,修改密碼等寫在index 中
??? 4. api管理
??? - 新建src/api/index.js
??? - 當路徑較多時可以再多建幾個文件,分類放置
??? - 掛載
??? - 在 main.js 里 import api from ‘./api/index’
??? - 使用 Vue.prototype.$api = api 掛載到原型鏈上
??? - 在 Vuex 里引入有 fetch頁面了,這個頁面已經將 api 引入了
即使已經在 main.js 中引入了 axios，并改寫了原型鏈，也無法在vuex 的 store.js 中直接使用 ajax命令換言之，這兩種方案是相互獨立的在組件中發送請求的時候，需要使用this.
store.dispatch 來分發
vuex 的dispatch和commit提交mutation的區別
??? 一個異步操作與同步操作的區別。
??? 當操作行為中含有異步操作，比如向后臺發送請求獲取數據，就需要使用action的 dispatch去完成了。
??? 其他使用commit即可。
??? commit=>mutations,用來觸發同步操作的方法。
??? dispatch =>actions,用來觸發異步操作的方法。
?
總結
- 上一篇： [笔记]提升R的性能和突破内存限制的技巧
- 下一篇： webpack开发Vue配置