2019-04-01

Vue.js工程化项目起步——vue-router-demo:

本例主要采用vue-cli配合webpack来创建项目，采用了VueRouter，引入axios库调用后端API，渲染数据，实现了增删改查功能

1.命令行先进入某个目录如D:\VueStudy
2.创建项目: vue init webpack vue-router-demo
3.进入vue-router-demo目录安装依赖：npm install
4.修改config目录下index.js的dev端口为80
5.运行：npm run dev，打开http://localhost，看到Vue主页logo即成功
6.ctrl+c退出批处理状态
7.在package.json的依赖文件，加入axios依赖

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "axios": "^0.18.0"
  }

8.安装axios，在命令行：npm install
9.项目的src目录的main.js文件引入axios

import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

10.components目录中创建一些vue组件，如图

image.png

11.配置路由，router目录的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)
        }
    ]
})

12.路由跳转例子：
无参跳转

    

任务中心

路径传参跳转：

js跳转：

_this.$router.push('/');

13.GET请求示例

var _this = this;
        this.$http.get('http://localhost:8080/api/courses').then(function(response) {
            _this.courses = response.data;
});

14.POST请求示例

15.DELETE请求示例

deleteCourse: function(courseId,index) {
            var _this = this;
            this.$http({
                method: 'delete',
                url: 'http://localhost:8080/api/course/' + courseId
            }).then(function() {
                alert('班课删除成功');
                 _this.courses.splice(index,1);
            });
        }

16.完整项目地址:https://github.com/mqxu/demo