史上最全Vue前端代码风格指南

格桑2021-09-16 16:08

    市面上常用的命名规范:

    camelCase(小驼峰式命名法——首字母小写)

    PascalCase(大驼峰式命名法——首字母大写)

    kebab-case(短横线连接式)

    Snake(下划线连接式)

    1、项目文件命名

    1.1、项目名

    全部采用小写方式,以短横线分隔。例:my-project-name。

    1.2目录名

    参照项目命名规则,有复数结构时,要采用复数命名法。例:docs、assets、components、directives、mixins、utils、views。

my-project-name/
|- BuildScript    // 流水线部署文件目录
|- docs           // 项目的细化文档目录(可选)
|- nginx          // 部署在容器上前端项目 nginx 代理文件目录
|- node_modules   // 下载的依赖包
|- public         // 静态页面目录
    |- index.html // 项目入口
|- src            // 源码目录
    |- api        // http 请求目录
    |- assets     // 静态资源目录,这里的资源会被wabpack构建
        |- icon   // icon 存放目录
        |- img    // 图片存放目录
        |- js     // 公共 js 文件目录
        |- scss   // 公共样式 scss 存放目录
            |- frame.scss   // 入口文件
            |- global.scss  // 公共样式
            |- reset.scss   // 重置样式
    |- components     // 组件
    |- plugins        // 插件
    |- router         // 路由
    |- routes         // 详细的路由拆分目录(可选)
        |- index.js
    |- store          // 全局状态管理
    |- utils          // 工具存放目录
        |- request.js // 公共请求工具
    |- views          // 页面存放目录
    |- App.vue        // 根组件
    |- main.js        // 入口文件
    |- tests          // 测试用例
    |- .browserslistrc// 浏览器兼容配置文件
    |- .editorconfig  // 编辑器配置文件
    |- .eslintignore  // eslint 忽略规则
    |- .eslintrc.js   // eslint 规则
    |- .gitignore     // git 忽略规则
    |- babel.config.js // babel 规则
    |- Dockerfile // Docker 部署文件
    |- jest.config.js
    |- package-lock.json
    |- package.json // 依赖
    |- README.md // 项目 README
    |- vue.config.js // webpack 配置

    1.3图像文件名

    全部采用小写方式,优先选择单个单词命名,多个单词命名以下划线分隔。

banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_TV.jpg

    1.4HTML文件名

    全部采用小写方式,优先选择单个单词命名,多个单词命名以下划线分隔。

|- error_report.html
|- success_report.html

    1.5CSS文件名

    全部采用小写方式,优先选择单个单词命名,多个单词命名以短横线分隔。

|- normalize.less
|- base.less
|- date-picker.scss
|- input-number.scss

    1.6JavaScript文件名

    全部采用小写方式,优先选择单个单词命名,多个单词命名以短横线分隔。

|- index.js
|- plugin.js
|- util.js
|- date-util.js
|- account-model.js
|- collapse-transition.js

    上述规则可以快速记忆为“静态文件下划线,编译文件短横线”。

    点击图片免费领取课程!

一史上最全Vue前端代码风格指南

    以上就是小编为大家准备的“史上最全Vue前端代码风格指南”一文,更多相关内容尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享