1、安装node.js
具体安装过程见简书文章：https://www.jianshu.com/p/e3e5c9c68f66
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就可以了。
2、Vue的单页应用的脚手架程序构建
- 进入某个目录，如：E://VueStudy
-
通过命令创建项目：vue init webpack vue-router-demo
进入vue-router-demo目录
-
安装依赖：npm install
-
测试
注意:ctrl+c退出批处理状态
3、进行一级路由配置
-
项目结构
在package.json的依赖文件，加入axios依赖
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"axios": "^0.18.0"
}
- 安装axios，在命令行：npm install
- 项目的src目录的main.js文件引入axios
import Vue from 'vue'
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: '<App/>'
})
- 配置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)
}
]
})
- 路由跳转例子：
无参跳转
<router-link to="/">
<img src="./assets/logo.png" class="logo"/>
</router-link>
<router-link to="/task" class="nav-item">任务中心</router-link>
- 路径传参跳转：
<router-link :to="'/course/' + course.courseId">
<img :src="course.cover" />
</router-link>
- js跳转：
_this.$router.push('/');* components文件夹建立相应的组件* 具体代码见github地址：https://github.com/Wuyou1999/VueStudy/tree/master/vue-router-demo1*
- 部分演示图
