初入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文件中的内容