1、安装好node环境通过CMD对Vue行配置

点此进入查看

2、进行vue-router-demo1项目的导入

找到自己在1步骤中所放的文件夹，在HBuilder中选择文件→导入项目进行导入

3、进行端口的修改，找到如图文件下的Index.js,将如图所示端口改为80，不然会和后端抢默认端口8080

image.png
image.png

4、注意如图所示几个文件夹，在components中建立Vue文件

image.png

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的配置

<template>
<div id="app">
<div class="header">
<router-link to="/">
<img src="/static/img1.png" class="logo"/>
</router-link>
<router-link to="/task" class="nav-item">任务中心</router-link>
<router-link to="/lib" class="nav-item">库管理</router-link>
<router-link to="/ucenter" class="nav-item">刘厅</router-link>
</div>
<div class="container"><router-view></router-view></div>
</div>
</template>

<script>
export default {
name: 'App'
};
</script>

<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);
}
</style>

7、配置index.js中所链接到的一些vue模块

image.png

8、运行到浏览器，进入cmd命令在vue-router-demo1中使用npm run dev,将最后弹出的链接在浏览器中打开