初始化修改，加入sass

Author: junhey

build/webpack.base.conf.js

@@ -37,6 +37,10 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test')]
       },
+      {
+        test: /\.scss$/,
+        loaders: ['style','css','sass']
+      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',

package.json

@@ -34,18 +34,20 @@
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
+    "node-sass": "^4.5.3",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
     "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.6",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
     "url-loader": "^0.5.8",
     "vue-loader": "^12.1.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.3.3",
     "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
     <router-view></router-view>
   </div>
 </template>
@@ -18,6 +17,5 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/components/Hello.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'hello',
+  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/backtotop.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <div class="index">test</div>
+    </div>
+</template>
+<script>
+    
+</script>
+<style>
+    .index {
+        width: 100%;
+        background-color: #fff;
+        margin-top: 40%;
+    }
+</style>

src/components/header.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <div class="index">test</div>
+    </div>
+</template>
+<script>
+    
+</script>
+<style>
+    .index {
+        width: 100%;
+        background-color: #fff;
+        margin-top: 40%;
+    }
+</style>

src/components/loading.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <div class="index">test</div>
+    </div>
+</template>
+<script>
+    
+</script>
+<style>
+    .index {
+        width: 100%;
+        background-color: #fff;
+        margin-top: 40%;
+    }
+</style>

src/components/menu.vue

@@ -1,15 +1,26 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Hello from '@/components/Hello'
-
+import index from '../views/index'
+import list from '../views/list'
+import topic from '../views/topic'
 Vue.use(Router)
 
 export default new Router({
   routes: [
+    {
+      path:'/list',
+      name:'list',
+      component: list
+    },
+    {
+      path:'/topic',
+      name:'topic',
+      component: topic
+    },
     {
       path: '/',
-      name: 'Hello',
-      component: Hello
+      name: 'index',
+      component: index
     }
   ]
 })

src/router/index.js

@@ -1,13 +1,7 @@
 <template>
-    <div>
-        <img class="index" src="../assets/images/index.png">
-    </div>
+    <div>index</div>
 </template>
 <script>
-    require('../assets/scss/CV.scss');
-    require('../assets/scss/iconfont/iconfont.css');
-    require('../assets/scss/github-markdown.css');
-
     export default {
         mounted() {
             setTimeout(() => {
@@ -18,10 +12,6 @@
         }
     };
 </script>
-<style lang="scss">
-    .index {
-        width: 100%;
-        background-color: #fff;
-        margin-top: 40%;
-    }
+<style>
+    
 </style>

src/views/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <div class="index">list<p>list</p></div>
+    </div>
+</template>
+<script>
+    
+</script>
+<style lang="scss" scoped>
+    .index {
+        width: 100%;
+        background-color: #fff;
+        p{
+            font-size: 100px;
+        }
+    }
+</style>

src/views/list.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <div class="index">topic</div>
+    </div>
+</template>
+<script>
+    
+</script>
+<style>
+    
+</style>