1忧便、安裝好node環(huán)境通過CMD對Vue行配置
2拣宏、進行vue-router-demo1項目的導(dǎo)入
找到自己在1步驟中所放的文件夾涧尿，在HBuilder中選擇文件→導(dǎo)入項目進行導(dǎo)入
3形纺、進行端口的修改昭抒，找到如圖文件下的Index.js,將如圖所示端口改為80瞬矩，不然會和后端搶默認(rèn)端口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)
},
{
//任務(wù)中心
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的配置
任務(wù)中心
庫管理
劉
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,將最后彈出的鏈接在瀏覽器中打開
