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