Scribd Logo
Upload

Welcome to Scribd!

  • Vue开发规范-V1 0

    Uploaded by

    cckun
    12 views20 pages

    Original Title

    Vue开发规范-V1.0

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views20 pages

    Vue开发规范-V1 0

    Uploaded by

    cckun

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 20

    4 HTML / Template

    4.1

    HTML5 doctype

    CSS JavaScript

    4 CSS / Scss
    4.2

    CSS

    4 JavaScript
    4.3

    4 4 Vue
    4.4
    1. Node.js 10.0 nvm nvm-windows
    Node
    2. Visual Studio Code (VS Code)
    3. VS Code
    4. Tab 2
    // settings.json
    {
    "editor.tabSize": 4
    // ...
    }

    5. Vetur Vue Vue


    6. Prettier - Code formatter CSS / Scss / JS Vetur

    7. Chinese (Simplified) Language Pack for Visual Studio Code VS Code

    8. Chrome Vue.js devtools


    4.1 HTML / Template

    1.
    <!-- not good -->
    <input class='a' type=text>

    <!-- good -->


    <input class="a" type="text">

    2. closing tag  </li>   </body> 


    H5

    <!-- not good -->


    <h1>h1 text
    <h2>h2 text

    <!-- good -->


    <h1>h1 text</h1>
    <h2>h2 text</h2>

    3. HTML

    &nbsp;

    © &copy;

    ¥ &yen;

    ® &reg;

    > &gt;

    < &lt;

    & &amp;

    4. td / th tr li ul / ol
    <!-- not good -->
    <table>
    <td>test</td>
    </table>

    <!-- good -->


    <table>
    <tr>
    <td>test</td>
    </tr>
    </table>

    5. ul / ol li
    <!-- not good -->
    <ul>
    <span>123</span>
    <li>a</li>
    <li>b</li>
    </ul>

    6.
    <!-- error -->
    <input class="a" type="text" class="b">

    <!-- good -->


    <input class="a b" type="text">

    7. https http
    https http
    //
    <img src="//static.chimeroi.com/hello-world.jpg">

    8.  img ,  table 

    <!-- not good -->


    <img src="test.jpg" alt width="400
    4 " height="300">

    <!-- good -->


    <img src="test.jpg" style="width:400
    4 px;height:300px;">

    9. data-
    data- w3c validator
    <!-- not good -->
    <div count="5"></div>

    <!-- good -->


    <div data-count="5"></div>
    HTML5 doctype
    HTML standard mode

    <!DOCTYPE html>

    <html>
    ...

    HTML lang

    HTML5

    html lang

    <html lang="zh-CN">
    <!-- ... -->
    </html>

    'UTF-8'

    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    ...

    CSS JavaScript
    HTML5 CSS JavaScript  type 
    text/css   text/javascript 
    <!-- External CSS -->
    <link rel="stylesheet" href="code_guide.css">

    <!-- In-document CSS -->


    <style>
    ...
    </style>

    <!-- External JS -->


    <script src="code_guide.js"></script>

    <!-- In-document JS -->


    <script>
    ...
    </script>

    1.  class 
    2.  id 
    3.  name 
    4.  data-* 
    5.  src ,  for ,  type ,  href ,  value  ,  max-length ,  max ,  min ,  pattern 
    6.  placeholder ,  title ,  alt 
    7.  aria-* ,  role 
    8.  required ,  readonly ,  disabled 

    HTML

    4.2 CSS / Scss

    1.
    2. id
    3. Scss
    $mainFontColor: #444
    444;

    #companyName,
    .company-name {
    color: $mainFontColor;
    }
    1.

    /* error */
    .selector {
    font-size: 15px
    color: red
    }

    /* not good */
    .selector {
    font-size: 15px;
    color: red
    }

    /* good */
    .selector {
    font-size: 15px;
    color: red;
    }

    2. 0  margin: 0;   margin: 0px; 


    3.  input[type="text"] 

    /* not good */
    .selector[type=text] {
    /* ... */
    }

    /* good */
    .selector[type="text"] {
    /* ... */
    }

    4.  #f3f6fa 
    5.
    6. z-index 10
    7.
    /* */
    input,
    form {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }

    8.  * 
    9.  :before   :after 
    10. 4 Scss 4
    11.  border: 0;   border: none; 
    12.  #fff   #ffffff 
    13. 1 0  .5   0.5   -.5px 
     -0.5px 

    1. CSS3 CSS

    2. input  line-height 
     line-height  Safari (  line-height 
    )
    /* not good */
    input {
    height: 40
    4 px;
    line-height: 40
    4 px;
    }

    /* good */
    input {
    height: 20px;
    line-height: 20px;
    padding: 10px 0;
    }

    1.
    2.

    1.
    2.
    3.
    4.  !important   !important 

    1.
    /* error */
    .element {
    margin: 0 0 10px;
    background: red;
    background: url("image.jpg");
    border-radius: 3px 3px 0 0;
    }

    /* good */
    .element {
    margin-bottom: 10px;
    background-color: red;
    background-image: url("image.jpg");
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    }

    2.
    /* not good */
    .element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 20px;
    }

    /* good */
    .element {
    padding: 10px 20px 15px;
    }

    CSS
    1. all

    transition all

    transition: all 2s linear;

    Safari

    transition: transform 2s linear, opacity 2s linear;

    1. transform position
    2. CSS JS
    1. Positioning
    2. Box model
    3. Typographic
    4. Visual
    5. Misc
    .declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
    }

    4.3 JavaScript

    1.
    2.
    3.

    inp input, priceInput


    day1, day2, param1 today, tomorrow

    id userId, orderId

    obj orderData, houseInfos

    tId removeMsgTimerId

    handler submitHandler, searchHandler

    4. texareaData leaveMsg
    5. up/down begin/end opened/closed visible/invisible
    scource/target
    6.
    shijianchuo timestamp
    s List orderList menuItems
    ed updated/found
    ing calling
    7.
    temp obj
    temp
    temp temp
    // not good
    let temp = 10;
    let leftPosition = currentPosition + temp
    topPosition = currentPosition - temp;

    // good
    let adjustSpace = 10;
    let leftPosition = currentPosition + adjustSpace
    topPosition = currentPosition - adjustSpace;

    8. done/found/successs/ok/available/complete
    // good
    let ajaxDone = true,
    fileFound = false,
    resourceUpdated = true;

    9. notOk notReady
     if (!notOk) 

    1.
    2.
    3.
    4.

    // not good
    let registerForm = null;
    let question = "";
    let calculateResult = 0;

    // good
    let registerForm = null,
    question = "",
    calculateResult = 0;

    5.
    // not good
    let registerForm,
    question,
    calculateResult;

    // good
    let registerForm = null,
    question = "",
    calculateResult = 0;

    6.
    // not good
    function calculatePrice(seatCount){
    if (seatCount <= 0) {
    return "";
    } else {
    return seatCount * 79;
    }
    }

    7. debugger
    8.

    4.4 Vue

    1.  App 
    // not good
    Vue.component('todo', {
    // ...
    })
    export default {
    name: 'Todo',
    // ...
    }

    // good
    Vue.component('todo-item', {
    // ...
    })
    export default {
    name: 'TodoItem',
    // ...
    }

    2. PascalCase
    // not good
    components/
    |- mycomponent.vue

    components/
    |- myComponent.vue

    // good
    components/
    |- MyComponent.vue

    3. ( )
    Base App V
    // not good
    components/
    |- MyButton.vue
    |- VueTable.vue
    |- Icon.vue

    // good
    components/
    |- BaseButton.vue
    |- BaseTable.vue
    |- BaseIcon.vue

    components/
    |- AppButton.vue
    |- AppTable.vue
    |- AppIcon.vue

    components/
    |- VButton.vue
    |- VTable.vue
    |- VIcon.vue

    4. ( )
    // not good
    components/
    |- ClearSearchButton.vue
    |- ExcludeFromSearchInput.vue
    |- LaunchOnStartupCheckbox.vue
    |- RunSearchButton.vue
    |- SearchInput.vue
    |- TermsCheckbox.vue

    // good
    components/
    |- SearchButtonClear.vue
    |- SearchButtonRun.vue
    |- SearchInputQuery.vue
    |- SearchInputExcludeGlob.vue
    |- SettingsCheckboxTerms.vue
    |- SettingsCheckboxLaunchOnStartup.vue

    5.
    // not good
    components/
    |- SdSettings.vue
    |- UProfOpts.vue

    // good
    components/
    |- StudentDashboardSettings.vue
    |- UserProfileOptions.vue
    1.  data   new Vue 

    // not good
    export default {
    data: {
    foo: 'bar'
    }
    }

    // good
    export default {
    data () {
    return {
    foo: 'bar'
    }
    }
    }

    2.  prop 

    // not good
    //
    props: ['status']

    // good
    props: {
    status: String
    }

    // better
    props: {
    status: {
    type: String,
    required: true,
    validator: function (value) {
    return [
    'syncing',
    'synced',
    'version-conflict',
    'error'
    ].indexOf(value) !== -1
    }
    }
    }

    3.  v-for   key   v-for 

    key v-for
    4.  v-if   v-for 
    <!-- not good -->
    <ul>
    <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
    >
    {{ user.name }}
    </li>
    </ul>

    <!-- good -->


    <ul>
    <li
    v-for="user in activeUsers"
    :key="user.id"
    >
    {{ user.name }}
    </li>
    </ul>

    5. PascalCase
    kebab-case
    <!-- not good -->
    <!-- -->
    <mycomponent/>
    <!-- -->
    <myComponent/>
    <!-- DOM -->
    <MyComponent></MyComponent>

    <!-- good -->


    <my-component></my-component>

    <!-- -->
    <my-component></my-component>

    6. JS/JSX PascalCase
    // not good
    Vue.component('myComponent', {
    // ...
    })
    import myComponent from './MyComponent.vue'
    export default {
    name: 'myComponent',
    // ...
    }
    export default {
    name: 'my-component',
    // ...
    }

    // good
    Vue.component('MyComponent', {
    // ...
    })
    import MyComponent from './MyComponent.vue'
    export default {
    name: 'MyComponent',
    // ...
    }

    7. Prop  prop  camelCase


    JSX kebab-case
    // not good
    props: {
    'greeting-text': String
    }
    <WelcomeMessage greetingText="hi"/>

    // good
    props: {
    greetingText: String
    }
    <WelcomeMessage greeting-text="hi"/>

    8. Vetur
    <!-- not good -->
    <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
    <MyComponent foo="a" bar="b" baz="c"/>

    <!-- good -->


    <img
    src="https://vuejs.org/images/logo.png"
    alt="Vue Logo"
    >
    <MyComponent
    foo="a"
    bar="b"
    baz="c"
    />

    9.
    // not good
    {{
    fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
    }}

    // good
    //
    {{ normalizedFullName }}
    //
    computed: {
    normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
    }
    }

    10.
    // not good
    computed: {
    finalPrice: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
    basePrice -
    basePrice * (this.discountPercent || 0)
    )
    }
    }

    // good
    computed: {
    basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
    },
    discount: function () {
    return this.basePrice * (this.discountPercent || 0)
    },
    finalPrice: function () {
    return this.basePrice - this.discount
    }
    }

    11. HTML
    <!-- not good -->
    <input type=text>
    <AppSidebar :style={width:sidebarWidth+'px'}>

    <!-- good -->


    <input type="text">
    <AppSidebar :style="{ width: sidebarWidth + 'px' }">

    12. (  :   v-bind:   @   v-on: )

     <template>   <script>   <style> 

    <!-- good -->


    <!-- ComponentA.vue -->
    <template>...</template>
    <style>/* ... */</style>

    <!-- ComponentB.vue -->


    <template>...</template>
    <script>/* ... */</script>
    <style>/* ... */</style>
    prop this.$parent prop

    Vue prop
    prop  this.$parent 

    ( )
    ( )

    Vuex this.$root

     this.$root  /
    Vuex

    You might also like