Vue项目编码规范

最新推荐文章于 2024-08-31 17:51:10 发布

向小暖

最新推荐文章于 2024-08-31 17:51:10 发布

阅读量1k

点赞数

分类专栏： Vuejs 文章标签： vuejs 编码规范

博主原创文章未经博主允许转载，请注明原创文章地址。

本文链接：https://blog.csdn.net/znyaiw/article/details/79986706

版权

Vuejs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文将探讨Vue项目的编码规范，包括单组件文件的样式、布局和样式的最佳实践，变量声明与定义的标准，单组件文件的命名规则，以及如何定制Vue应用的代码规范，以提升代码质量和团队协作效率。

摘要由CSDN通过智能技术生成

单组件文件样式、布局及样式

/**
 * 布局
 * lang: 可选，默认使用html，用于标注布局使用的模板类型。
 * /
<template lang="html">
    // tag: 原生标签或vue标签(router-view、router-link、...)，template起始必须
    // container: 组件根节点样式，一般一个项目中是统一的，可以使用空样式
    <tag class="container">
    </tag>
</template>

/**
 * 逻辑
 * lang: 可选，默认使用JavaScript，用于标注逻辑使用的脚本类型。
 * /
<script lang="javascript">
// 全局变量和引用
const g_var = ...;
import xxx from '...';
// 以模块形式导出
export default {
    // 混入
    mixins: [xxMixin],
    // 指令
    directives: {
        xxx: { ... }
    },
    // 过滤器
    filters: {
        xxx: { ... }
    },
    //子组件引入
    components: {
        'xx-xx': xxXx
    },
    // 父组件传递数据
    props: {
    },
    // 组件实例数据
    data() {
        // data()必须是个函数，一定记得return
        return {
        }
    },
    // 计算属性
    computed: {
        // 默认只有getter
        xx() {
            return ...;
        },
        // 必要时可添加setter
        xxx: {
            getXxx: () => {
                return ...;
            },
            setXxx: (val) => {
                this.xxx = val;
            }
        }
    },
    // 监听属性: 数据变化时执行异步或开销较大的操作
    watch: {
    },
    // 生命周期
    created: {
    },
    mounted: {
    },
    updated: {
    },
    destroyed: {
    },
    // 渲染函数 & JSX
    render: (h) => {
    },
    // 方法
    methods: {
    }
}
</script>

/**
 * 样式
 * lang: 可选，默认css，用于标注样式使用的编写类型
 * scoped: 可选但建议，设置样式作用域，或使用CSS Modules
 * /
<style lang="css" scoped>
</style>

变量声明及定义

项目全局: g / g_
组件全局: _XXX
组件私有：_xXx
只读: const XXX = ...

单组件文件命名

/**尽量使用完整单词或表意明确的单词缩写**/
// 单词
Xxx.vue
// 多词
XxxYyy.vue
xxx-yyy.vue
// 基础组件，展示类、无逻辑或无状态
BaseXxx.vue
// 单例
TheXxx.vue
// 紧密耦合
xx
├─ Xx.vue
├─ XxYy.vue
├─ XxYyZz.vue

代码规范

// 自闭合组件
<!-- 单文件、字符串模板或JSX中 -->
<XxYy />
<!-- DOM模板中 -->
<xx-yy></xx-yy>
// 子组件引用
import XxYx from '...'
// prop
<!-- props中 -->
props: {
    xxYy: String
}
<!-- 模板或JSX中 -->
<Tag xx-yy="..." />
// 属特性分行
<img
    src="..."
    alt="..."
/>
<select class="...">
    <option
        v-for="..."
        :key="...">
    </option>
</select>
// v-for设置键值key，同时尽量避免直接使用index
<li
    v-for="item in list"
    :key="item.id">
</li>

定制Vue

// 支持全局混入
Vue.mixin({});
// 支持自定义选项合并策略
Vue.config.optionMergeStrategies.xxOption = (to, from) => { return ... }
// 支持自定义指令
Vue.directive('xxx', { ... })
// 支持自定义过滤器
Vue.filter('xxx', { ... })