vue饿了么踩坑记（1）

初入vue，小白鼠踩了好多坑。

tips：

1）node_modules和vue_template安装在了C盘下（刚开始项目也自动安装在了C盘下），后来把项目删除，在自定义位置下重新安装了项目，但是后面在node_modules下安装依赖的时候就需要在跳到C盘，再跳到E盘去npm run dev，，有点麻烦，但实在是不想在配环境了

2）注册组件的时候要用components，多个s

3）iconmoon可以在线制作自定义图标（矢量图）

4）vue-router问题，因为视频是在vue1.0下做的，在vue2.0下配置路由

参考：点击打开链接

新建一个router.js

/**
 * Created by lyq on 2018/3/30.
 */
import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from './components/goods/goods.vue';
import ratings from './components/ratings/ratings.vue';
import seller from './components/seller/seller.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'active',
  routes: [{
    path: '/goods', component: goods
  }, {
    path: '/ratings', component: ratings
  }, {
    path: '/seller', component: seller
  }, {
    path: '*', redirect: '/goods'
  }]
});

export default router;

在main.js中引入

import router from './router';

在App.vue中使用router-link

<div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>

结果，点击商品、评论、商家，那么就会出现对应vue文件中的内容