Vue脚手架程序构建

1、进入某个目录

2、通过命令创建项目：vue init webpack vue-router-demo1（后几项都选N）

3、进入vue-router-demo1目录

运行成功界面

image

4、更改config目录下的index.js文件，将端口改为80

5、安装依赖：npm install

6、运行：npm run dev

运行成功界面

image

7、vue-router-demo1 项目结构

image

7、进行一级路由配置

• 1、Index.vue
• 2、Message.vue
• APP.vue
• router文件夹的index.js文件

index.js文件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    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)
    }
  ]
})

• components文件夹建立相应的组件

具体代码还请参考github上的项目代码：
vue-router-demo1项目——前端(vue-router-demo1)
vue-router0demo1项目——后端(spring-boot-study)