前后端分离，Vue+restfullframework

 一、准备

修改源：
    npm config set registry https://registry.npm.taobao.org 

创建脚手架：
    vue init webpack Vue项目名称
    #Install vue-router? Yes
插件：
　　 npm install axios
    axios，发送Ajax请求
    vuex，保存所有组件共用的变量
    vue-cookies，操作cookie

二、流程

1、创建脚手架

npm config set registry https://registry.npm.taobao.org
vue init webpack

#吧route的那一个设置为yes,其他的设置为no

2、启动Vue

cd Vue项目名称 
npm run dev

3、显示组件

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

4、写路由

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import Index from '@/components/Index'
 4 import Login from '@/components/Login'
 5 import Course from '@/components/Course'
 6 import Micro from '@/components/Micro'
 7 import News from '@/components/News'
 8 import CourseDetail from '@/components/CourseDetail'
 9 import NotFound from '@/components/NotFound'
10 
11 Vue.use(Router)
12 
13 export default new Router({
14   routes: [
15     {
16       path: '/',
17       name: 'index',
18       component: Index
19     },
20     {
21       path: '/index',
22       name: 'index',
23       component: Index
24     },
25     {
26       path: '/course',
27       name: 'course',
28       component: Course
29     },
30     {
31       path: '/course-detail/:id/',
32       name: 'courseDetail',
33       component: CourseDetail
34     },
35     {
36       path: '/micro',
37       name: 'micro',
38       component: Micro
39     },
40     {
41       path: '/news',
42       name: 'news',
43       component: News
44     },
45     {
46       path: '/login',
47       name: 'login',
48       component: Login
49     },
50     {
51       path: '*',
52       component: NotFound
53     }
54   ],
55   mode: 'history'
56 })

View Code

 1 # 定义路由
 2                     {
 3                       path: '/course-detail/:id/',
 4                       name: 'courseDetail',
 5                       component: CourseDetail
 6                     },
 7                     {
 8                       path: '/login',
 9                       name: 'login',
10                       component: Login
11                     },
12                     {
13                       path: '*',
14                       component: NotFound
15                     }
16                 
17                 
18                 # router-link参数
19                     <router-link :to="{'path':'/course-detail/'+item.id }">{{item.name}}</router-link>
20                     <router-link to="/index">首页</router-link>
21     
22                 # 获取传过来的参数
23                     this.$route.params.id
24                 # 重定向
25                     this.$router.push('/index')
26                 

View Code