美文网首页
vue项目构建规则

vue项目构建规则

作者: 江湖小盛 | 来源:发表于2021-07-03 21:50 被阅读0次

    1.单文件组件:
    a)单词大写开头 (PascalCase),MyComponent.vue
    b)横线连接 (kebab-case),my-component.vue

    2.基础组件名:
    BaseButton.vue
    BaseTab.vue

    3.紧密耦合的组件名:
    a)和父组件紧密耦合的子组件应该以父组件名作为前缀命名
    |-TodoList.vue
    |-TodoListItem.vue
    |-TodoListItemButton.vue

    4.组件名中的单词顺序:
    a)组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。
    |-SearchButtonRun.vue
    |-SearchInputQuery.vue
    |-SettingsCheckboxTerms.vue

    5.模板中组件名大小写:kebab-case
    a)
    <MyComponent/>
    b)
    <my-component></my-component>

    5.Prop 名大小写 camelCase
    props: {
    'fullName': String
    }
    <my-component full-name="wangli" />

    src目录分类:
    a) |--assets:放一些静态资源
    b) |--comment:放共用的js(比如一个日期格式化函数)
    c) |--components: 放公共组件
    |--betterScroll
    |--BetterScroll.vue
    d) |--network:放数据接口代码
    e) |--plugin:放第三方插件js
    |--vant.js
    f) |--router:路由
    g) |--store:vuex
    h) |--views:视图
    |--home
    |--Home.vue
    |--cart
    |--Cart.vue
    i) |--APP.vue: 根组件
    j) |--main.js:入口文件

    相关文章

      网友评论

          本文标题:vue项目构建规则

          本文链接:https://www.haomeiwen.com/subject/vnoleltx.html