style: .vue style fix

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   extends: [
-    "@vue/standard"
+    'plugin:vue/recommended',
+    '@vue/standard'
   ]
 }

demo/components/homeDemo.vue

@@ -1,12 +1,12 @@
 <template>
-<div>
-  <div class="service-container">
-    <nv-home></nv-home>
+  <div>
+    <div class="service-container">
+      <nv-home />
+    </div>
+    <div class="nav-container">
+      <nv-navbar />
+    </div>
   </div>
-  <div class="nav-container">
-    <nv-navbar></nv-navbar>
-  </div>
-</div>
 </template>
 
 <script>

demo/components/sideMenuDemo.vue

@@ -1,12 +1,12 @@
 <template>
-<div>
-  <div class="service-container">
-    <nv-layout></nv-layout>
+  <div>
+    <div class="service-container">
+      <nv-layout />
+    </div>
+    <div class="nav-container">
+      <nv-navbar />
+    </div>
   </div>
-  <div class="nav-container">
-    <nv-navbar></nv-navbar>
-  </div>
-</div>
 </template>
 
 <script>

demo/demo.vue

@@ -1,10 +1,16 @@
 <template>
-<div class="demo">
-  <div class="section">
-    <div class="section title">Card</div>
-    <nv-card :width="300" title="Apply For Github Access" content="Lorem ipsum dolor sit amet, ea est eros munere. Voluptua phaedrum oportere quo cu, nam id laboramus dissentias, diam meliore singulis in quo. Duo in lorem qualisque aliquando. Id per aliquip cotidieque, denique mediocritatem pri ea. Usu nihil utamur quaestio ad, pro in tota euismod incorrupte, eum an paulo nonumes."></nv-card>
+  <div class="demo">
+    <div class="section">
+      <div class="section title">
+        Card
+      </div>
+      <nv-card
+        :width="300"
+        title="Apply For Github Access"
+        content="Lorem ipsum dolor sit amet, ea est eros munere. Voluptua phaedrum oportere quo cu, nam id laboramus dissentias, diam meliore singulis in quo. Duo in lorem qualisque aliquando. Id per aliquip cotidieque, denique mediocritatem pri ea. Usu nihil utamur quaestio ad, pro in tota euismod incorrupte, eum an paulo nonumes."
+      />
+    </div>
   </div>
-</div>
 </template>
 
 <script>

package.json

@@ -25,6 +25,7 @@
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.2.2",
     "file-loader": "^3.0.1",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",

packages/common/Card/src/main.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="nv-card" :style="style">
+  <div
+    class="nv-card"
+    :style="style"
+  >
     <!-- <div class="mask">
       <div class="intro">
         <div></div>
@@ -10,20 +13,31 @@
       </div>
     </div> -->
     <div class="intro">
-      <nv-icon type="logo-github" size="32"/>
+      <nv-icon
+        type="logo-github"
+        size="32"
+      />
       <div class="ribbon">
-        <nv-icon type="md-lock" size="16" style="margin-right: 4px;"/>
+        <nv-icon
+          type="md-lock"
+          size="16"
+          style="margin-right: 4px;"
+        />
         <div>Access Required</div>
       </div>
     </div>
-    <div class="title">{{ title }}</div>
-    <div class="content">{{ content }}</div>
+    <div class="title">
+      {{ title }}
+    </div>
+    <div class="content">
+      {{ content }}
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "NvCard",
+  name: 'NvCard',
   props: {
     title: {
       type: String,
@@ -48,5 +62,5 @@ export default {
       this.style.width = `${this.width}px`
     }
   }
-};
+}
 </script>

packages/common/Icon/src/main.vue

@@ -1,42 +1,45 @@
 <template>
-  <i :class="classes" :style="styles"></i>
+  <i
+    :class="classes"
+    :style="styles"
+  />
 </template>
 <script>
-const prefixCls = "ion";
+const prefixCls = 'ion'
 export default {
-  name: "NvIcon",
+  name: 'NvIcon',
   props: {
     type: {
       type: String,
-      default: ""
+      default: ''
     },
     size: [Number, String],
     color: String,
     custom: {
       type: String,
-      default: ""
+      default: ''
     }
   },
   computed: {
-    classes() {
+    classes () {
       return [
         {
-          [`${prefixCls}-${this.type}`]: this.type !== "",
-          [`${this.custom}`]: this.custom !== ""
+          [`${prefixCls}-${this.type}`]: this.type !== '',
+          [`${this.custom}`]: this.custom !== ''
         }
-      ];
+      ]
     },
-    styles() {
-      let style = {};
+    styles () {
+      let style = {}
       if (this.size) {
-        style["font-size"] = `${this.size}px`;
-        style["line-height"] = '1';
+        style['font-size'] = `${this.size}px`
+        style['line-height'] = '1'
       }
       if (this.color) {
-        style.color = this.color;
+        style.color = this.color
       }
-      return style;
+      return style
     }
   }
-};
-</script>
+}
+</script>

packages/common/Loader/src/main.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="nv-loader__mask">
     <div class="nv-loader__loader">
-      <svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
+      <svg
+        viewBox="25 25 50 50"
+        class="circular"
+      ><circle
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+        class="path"
+      /></svg>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "NvLoader",
+  name: 'NvLoader',
   props: {
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -62,4 +71,3 @@ export default {
   }
 }
 </style>
-

packages/nimbus/Home/src/main.vue

@@ -1,27 +1,18 @@
 <template>
   <div class="home">
     <div class="columns">
-      <div class="column"></div>
-      <div class="column"></div>
-      <div class="column"></div>
-      <div class="column"></div>
-
+      <div class="column" />
+      <div class="column" />
+      <div class="column" />
+      <div class="column" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "NvHome",
+  name: 'NvHome',
   props: {},
-  methods: {
-    toggle () {
-      this.collapse = !this.collapse
-    },
-    setActive (itemName) {
-      this.activeItemName = itemName
-    }
-  },
   data () {
     return {
       collapse: false,
@@ -29,7 +20,7 @@ export default {
       items: [
         {
           name: 'Service Management'
-        }, 
+        },
         {
           name: 'Service Type Management'
         },
@@ -38,8 +29,16 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    toggle () {
+      this.collapse = !this.collapse
+    },
+    setActive (itemName) {
+      this.activeItemName = itemName
+    }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -60,9 +59,8 @@ export default {
       background-color: white;
       flex-grow: 1;
       height: 100px;
-      
+
     }
   }
 }
 </style>
-

packages/nimbus/Layout/src/main.vue

@@ -1,48 +1,54 @@
 <template>
   <div class="layout">
-    <div class="body" :class="{ collapse: collapse, active: !collapse }">
+    <div
+      class="body"
+      :class="{ collapse: collapse, active: !collapse }"
+    >
       <div class="header">
         <span class="content">
           Service Management
         </span>
       </div>
-      <nv-loader></nv-loader>
+      <nv-loader />
     </div>
-    <div class="menu" :class="{ collapse: collapse, active: !collapse }">
+    <div
+      class="menu"
+      :class="{ collapse: collapse, active: !collapse }"
+    >
       <div class="header">
         <div class="content">
           <div class="icon">
-            <nv-icon type="md-settings" :size="22"></nv-icon>
+            <nv-icon
+              type="md-settings"
+              :size="22"
+            />
           </div>
           Administration
         </div>
       </div>
       <div
-        class="item"
-        :class="{ active: activeItemName === item.name }"
         v-for="item in items"
         :key="item.name"
+        class="item"
+        :class="{ active: activeItemName === item.name }"
         @click="setActive(item.name)"
       >
         <span>{{ item.name }}</span>
       </div>
-      <div class="toggle-button" @click="toggle"><img src="./toggleButton.svg"></div>
+      <div
+        class="toggle-button"
+        @click="toggle"
+      >
+        <img src="./toggleButton.svg">
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "NvLayout",
+  name: 'NvLayout',
   props: {},
-  methods: {
-    toggle () {
-      this.collapse = !this.collapse
-    },
-    setActive (itemName) {
-      this.activeItemName = itemName
-    }
-  },
   data () {
     return {
       collapse: false,
@@ -50,7 +56,7 @@ export default {
       items: [
         {
           name: 'Service Management'
-        }, 
+        },
         {
           name: 'Service Type Management'
         },
@@ -59,8 +65,16 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    toggle () {
+      this.collapse = !this.collapse
+    },
+    setActive (itemName) {
+      this.activeItemName = itemName
+    }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -204,8 +218,7 @@ export default {
     }
     &.active::before {
       opacity: .9;
-    }    
+    }
   }
 }
 </style>
-

packages/nimbus/Navbar/src/main.vue

@@ -1,32 +1,40 @@
 <template>
   <div class="nav">
     <div class="left">
-      <div class="item">TuSimple</div>
+      <div class="item">
+        TuSimple
+      </div>
     </div>
     <div class="right">
-      <div class="item">Beijing</div>
-      <div class="item">English</div>
-      <div class="item">Mollie Jennings</div>
+      <div class="item">
+        Beijing
+      </div>
+      <div class="item">
+        English
+      </div>
+      <div class="item">
+        Mollie Jennings
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "NvNavbar",
+  name: 'NvNavbar',
   props: {},
+  data () {
+    return {
+      collapse: false
+    }
+  },
   methods: {
     toggle () {
       console.log('hello')
       this.collapse = !this.collapse
     }
-  },
-  data () {
-    return {
-      collapse: false
-    }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -65,4 +73,3 @@ export default {
   }
 }
 </style>
-

packages/nimbus/SideMenu/src/main.vue

@@ -1,31 +1,47 @@
 <template>
-  <div class="menu-container" :class="{ collapse: collapse, active: !collapse }">
-    <div class="menu" :class="{ collapse: collapse, active: !collapse }">
-      <div class="header">Good Service<button @click="toggle">&lt;</button></div>
-      <div class="item">Service Management</div>
-      <div class="item">Service Management</div>
-      <div class="item">Service Management</div>
-      <div class="toggle-button"></div>
+  <div
+    class="menu-container"
+    :class="{ collapse: collapse, active: !collapse }"
+  >
+    <div
+      class="menu"
+      :class="{ collapse: collapse, active: !collapse }"
+    >
+      <div class="header">
+        Good Service<button @click="toggle">
+          &lt;
+        </button>
+      </div>
+      <div class="item">
+        Service Management
+      </div>
+      <div class="item">
+        Service Management
+      </div>
+      <div class="item">
+        Service Management
+      </div>
+      <div class="toggle-button" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "NvSidemenu",
+  name: 'NvSidemenu',
   props: {},
+  data () {
+    return {
+      collapse: false
+    }
+  },
   methods: {
     toggle () {
       console.log('hello')
       this.collapse = !this.collapse
     }
-  },
-  data () {
-    return {
-      collapse: false
-    }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -75,4 +91,3 @@ export default {
   }
 }
 </style>
-

src/Amazing.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>{{title}}</div>
+  <div>{{ title }}</div>
 </template>
 
 <script>
 export default {
-  name: 'amazing',
+  name: 'Amazing',
   props: ['title'],
   methods: {
     hello () {
@@ -17,4 +17,3 @@ export default {
 <style>
 
 </style>
-