vue-router-demo1练习
1、安装好node环境通过CMD对Vue行配置
2、进行vue-router-demo1项目的导入
找到自己在1步骤中所放的文件夹，在HBuilder中选择文件→导入项目进行导入
3、进行端口的修改，找到如图文件下的Index.js,将如图所示端口改为80，不然会和后端抢默认端口8080
4、注意如图所示几个文件夹，在components中建立Vue文件
5、在4步骤中配置index.js文件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
// 去除#的hash模式
mode: "history",
routes: [
{
//我的班课
path: '/',
name: 'Index',
component: resolve => require(['../components/Index.vue'], resolve)
},
{
//任务中心
path: '/task',
name: 'Task',
component: resolve => require(['../components/Task.vue'], resolve)
},
{
//库管理
path: '/lib',
name: 'Lib',
component: resolve => require(['../components/Lib.vue'], resolve)
},
{
//个人中心
path: '/ucenter',
name: 'UCenter',
component: resolve => require(['../components/UCenter.vue'], resolve)
},
{
//新建班课
path: '/new_course',
name: 'NewCourse',
component: resolve => require(['../components/NewCourse.vue'], resolve)
},
{
//班课详情
path: '/course/:id',
name: 'CourseDetail',
component: resolve => require(['../components/CourseDetail.vue'], resolve)
}
]
})
6、进行App.vue的配置
任务中心
库管理
刘
export default {
name: 'App'
};
<style>
app {
background-color: rgb(244, 244, 244);
}
.header {
display: flex;
height: 80px;
background-color: #fff;
font-size: 20px;
padding-left: 120px;
align-items: center;
}
.nav-item {
width: 100px;
margin-right: 20px;
}
.logo{
widows: 100px;
height: 35px;
margin-right: 200px;
}
.container {
width: 85%;
margin: 0 auto;
padding-bottom: 40px;
}
a {
text-decoration: none;
color: #aaa;
}
a:hover {
color: rgb(2,165,218);
}
7、配置index.js中所链接到的一些vue模块
8、运行到浏览器，进入cmd命令在vue-router-demo1中使用npm run dev,将最后弹出的链接在浏览器中打开
