发表于 | 分类于 | 0 | 阅读次数 668

最近和小伙伴一起开发项目（其实之前就有，但是他不会用锤子），他一直吐槽我的代码非常鲜有特色，时常赞扬我，为了统一大家的开发习惯和规范因此我专门去官网查询一些规范以及和小伙伴交流。

ESlint

首先我觉得遵循ESlint是很好的选择，大家都在用。
在项目创建的时候选择 ESLint + Prettier。

ESlint规范

Vue组件命名规范

参考Vue.js 官方文档。

基础组件名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

模板中的组件名大小写

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。

Prop 名大小写

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

Vue风格指南

API规范管理设计

对于前端来说，一个页面除了静态的页面编写之外就是跟后端的同时打交道，沟通联调，那么面对众多的api 你又是如何进行管理的呢？
当我还是个小白的时候，（现在也是，不敢逼逼，在技术这条路上还是低调点为好），api 那个页面用到，那个方法用到就调用，不仅api 不好管理，而且代码显得很臃肿，不美观，后期维护修改起来也很费力。
还好遇见了涛哥！！！YYDS！

按照涛哥的思想来说，首先在项目里面建立一个名为API的文件夹，再按照不同的模块功能分组创建以模块名称创建js文件，最后在该文件夹下创建一个index.js 用于对所有子模块的api.js文件的暴露出来。

image.png

以上图片是一个项目的例子。

index.js文件内容

import quelity from './quelity'
import user from './user'
import network from './network'
import analysis from './analysis'
import device from './device'
const API = {
    user: user,
    network: network,
    quelity: quelity,
    analysis: analysis,
    device: device
}
// module.exports = API
export default API

index.js主要是用于对所有子模块的api文件的暴露出来，然后就可以直接调用了，无论这个api 调用了多少次，只需修改一次，这样做的还有利于多人协同开发，在同一个文件中定义，防止出现同样的名称，谁定义谁用。

user.js文件内容

const user = {
    getToken(username, password) {
        return {
            url: '/api/user/login',
            method: 'post',
            data: {
                username: username,
                password: password
            }
        }
    },
    getUserInfo() {
        return {
            url: '/api/user/info',
            method: 'get'
        }
    }
}
module.exports = user

可以看到，其实对API的封装只封装了请求体的部分，规定了url、method、data的数据，使用时调用就会自动生成这样的格式，方便统一修改和统一调用。

路由规范管理设计

路由其实也可以分文件管理，但是具体项目需要具体分析，这里我提供的是网络管理系统的参考。和API规范是差不多的设计。请忽略xxRoutes.js

image.png

按照不同的模块功能分组创建以模块名称创建路由。在index.js引入这些路由。由于我们这个是管理系统，所以path为/时就把所有的页面加入到子路由了。除了登录是不用套侧边栏和头部因此放在外面。

index.js文件内容

import Vue from 'vue'
import Home from '../views/Home.vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import quelityRouterConfig from './quelityRoutes'
import xxroutes from './xxRoutes'
import mapRoutes from './mapRoutes'
import userRoutes from './userRoutes'
Vue.use(VueRouter)


/**
 * 其他文件中的路由信息导入后添加到这个数组中
 */
const extraRoutes = [
    quelityRouterConfig,
    mapRoutes,
    xxroutes,
    userRoutes
].flat()

/**
 * 总路由配置
 * @type {import('vue-router').RouteConfig[]}
 */
const allRoutes = [
    {
        path: '/',
        component: Home,
        children: extraRoutes
    },
    {
        path: '/login',
        component: Login
    }
]

const router = new VueRouter({
    routes: allRoutes
})

export default router

userRoutes.js文件内容

import UserTable from '../views/user/UserTable.vue'
import DataAnalysis from '../views/user/DataAnalysis.vue'
/**
 * 用户管理相关的路由
 * @author xiaoxi
 * @type {import("vue-router").RouteConfig}
 */
const userRoutes = {
    path: '/user',
    name: 'user',
    component: require('../views/user/index.vue').default,
    children: [
        {
            path: '/user/usertable',
            name: 'usertable',
            component: UserTable
        },
        {
            path: '/user/dataanalysis',
            component: DataAnalysis
        }
    ]
}

export default userRoutes

视图的规范管理设计

视图也是按照如上的方法，按照不同的模块功能分组创建以模块名称创建视视图文件夹，文件夹内存放该视图相关的视图或该组件专用的组件。
image.png

以上是个人认为的基本的规范，再也不用做异类啦。（可能这个规范就是异类）

0%