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,将最后弹出的链接在浏览器中打开