最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来。理解有误再来修改。
路由问题
之前的路由是写在app.vue里边,而2.0的路由直接有个router文件夹的,路由的信息都在这里面的index.js文件里面
import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@/components/Hello'; Vue.use(Router); export default new Router({
routes: [
{
path: '/',
components: {
default: Hello
}
}
]
});
如果我们想在页面中再引入一个组件,就可以直接在这个path目录下写,比如我们再加个header组件
import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@/components/Hello';
// 导入组件
import Header from '@/components/header/header'; Vue.use(Router); export default new Router({
routes: [
{
path: '/',
components: {
default: Hello,
// 注册组件,命名为Header
Header: Header
}
}
]
});
然后在App.vue文件内写入就好了
<router-view name="Header"></router-view>
npm run dev 报的错
1.找不到模块
Module build failed: Error: Cannot find module '模块名'
安装对应模块
npm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)
npm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)