'vue的组件及运用'

package.json

@@ -31,6 +31,8 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
+    "less": "^3.0.4",
+    "less-loader": "^4.1.0",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",

src/App.vue

@@ -1,15 +1,17 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <my-header></my-header>
     <router-view/>
-    <router-view name="title1"/>
-    <router-view name="title2"/>
   </div>
 </template>
 
 <script>
+import MyHeader from '@/components/myHeader'
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    MyHeader
+  }
 }
 </script>
 
@@ -18,8 +20,9 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+}
+html,body {
+  padding: 0;
+  margin: 0;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank">
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank">
-          Forum
-        </a>
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank">
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank">
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a href="http://router.vuejs.org/" target="_blank">
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a href="http://vuex.vuejs.org/" target="_blank">
-          vuex
-        </a>
-      </li>
-      <li>
-        <a href="http://vue-loader.vuejs.org/" target="_blank">
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a href="https://github.com/vuejs/awesome-vue" target="_blank">
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "HelloWorld",
-    data() {
-      return {
-        msg: "Welcome to Your Vue.js App"
-      };
-    }
-  };
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-  h1,
-  h2 {
-    font-weight: normal;
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-
-  li {
-    display: inline-block;
-    margin: 0 10px;
-  }
-
-  a {
-    color: #42b983;
-  }
-</style>

src/components/myHeader.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="myHeader">
+    <img class="logo" src="@/assets/logo.png" />
+    <h3 class="title">Hxx-Luxury Store</h3>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "myHeader",
+    data() {
+      return {
+        msg: "Welcome to Your Vue.js App"
+      };
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+.myHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.15);
+  .logo {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    margin-left: 5px;
+  }
+  .title {
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    color: #fff;
+  }
+}
+</style>

src/view/goods.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="goods">
-		This is goods:
-		<span>{{$route.query.goodsId}}</span>
+		<!-- This is goods:
+		<span>{{$route.query.goodsId}}</span> -->
 	</div>
 </template>
 <script>