Django rest framework + Vue简单示例

构建vue项目参考这篇文章https://segmentfault.com/a/1190000008049815

一、创建Vue项目

修改源：npm config set registry https://registry.npm.taobao.org (建议修改)

创建脚手架：vue init webpack Vue项目名称

基本插件：

axios，发送Ajax请求
vuex，保存所有组件共用的变量
vue-cookies，操作cookie

二、流程

vue项目基本目录结构

Django rest framework + Vue简单示例

1.创建脚手架

vue init webpack Vue项目名称

运行 npm run dev

2.App.Vue中

# 用于点击查看组件
<router-link to="/index">首页</router-link>
                
# 组件显示的位置
<router-view/>

3.写路由

写在route/index.js中

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import index from '@/components/Index'
import Cource from '@/components/Cource'
import Xw from '@/components/Xw'
import Login from '@/components/Login'
import CourseDetail from '@/components/CourseDetail'



Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/index',
      name: 'index',
      component: index
    },
    {
      path: '/cource',
      name: 'Cource',
      component: Cource
    },
    {
      path: '/xw',
      name: 'Xw',
      component: Xw
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
     {
      path: '/course-detail/:id/',
      name: 'CourseDetail',
      component: CourseDetail
    }
  ],
  mode: 'history'
})

index.js