'add'

README.md

@@ -1 +1 @@
-阿里巴巴矢量图库icon-font的运用
+less的引用及公共变量的抽离

package.json

@@ -10,6 +10,8 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "less": "^3.0.4",
+    "less-loader": "^4.1.0",
     "lib-flexible": "^0.3.2",
     "vue": "^2.5.2",
     "vue-resource": "^1.5.1",

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <span class="iconfont">&#xe6b8;</span>
     <router-view/>
   </div>
 </template>

src/assets/styles/variables.less

@@ -0,0 +1 @@
+@bgColor: red;

src/router/index.js

@@ -1,19 +1,13 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Test from '@/view/test'
+import Home from '@/view/home'
-import Title1 from '@/view/title1'
-import Title2 from '@/view/title2'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [{
     path: '/',
-    name: '/',
+    name: 'Home',
-    components: {
+    component: Home
-      default: Test,
-      title1: Title1,
-      title2: Title2
-    }
   }]
 })

src/view/Home.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="home">
+		hello
+	</div>
+</template>
+<script>
+export default {
+  name: "home",
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+// 这样引入会报错
+// @import '@/assets/styles/variables.less';
+
+// 需要加一个波浪符
+//@import "~@/assets/styles/variables.less";
+
+// 可以使用相对路径
+//@import "../assets/styles/variables.less";
+
+// 在webapck.base.conf.js中的alias中配置路径
+@import "~styles/variables.less";
+
+.home {
+  background: @bgColor;
+}
+</style>

src/view/goods.vue

@@ -1,10 +0,0 @@
-<template>
-	<div class="goods">
-		<!-- This is goods:
-		<span>{{$route.query.goodsId}}</span> -->
-	</div>
-</template>
-<script>
-export default {};
-</script>
-<style scoped></style>

src/view/test.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="test">
-    <!-- 动态路由 -->
-    This is id: {{$route.params.testId}}
-
-    <!-- 嵌套路由 -->
-    <router-link to="/test/title1">标题1</router-link>
-    <router-link to="/test/title2">标题2</router-link>
-    <router-view></router-view>
-
-    <!-- 编程式路由 -->
-    <div @click="gotoGoods">跳转到商品详情页面</div>
-
-     <!-- 命名路由 -->
-    <router-link v-bind:to="{name: 'goods'}">用命名路由的方式跳转到商品详情页面</router-link>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      msg: 'hello vue'
-    }
-  },
-  methods: {
-    gotoGoods() {
-      //this.$router.push('/goods');
-
-      // this.$router.push({
-      // 	path: '/goods?goodsId=666'
-      // });
-      
-      this.$router.push({
-      	path: '/goods',
-      	query: {
-      		goodsId: 666
-      	}
-      })
-    }
-  }
-}
-
-</script>
-<style scoped></style>

src/view/title1.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="title1">
-  	这里是title1的内容
-  </div>
-</template>
-<script>
-export default {
-}
-
-</script>
-<style scoped></style>

src/view/title2.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="title2">
-  	这里是title2的内容
-  </div>
-</template>
-<script>
-export default {
-}
-
-</script>
-<style scoped></style>