1竟痰、安裝node.js
具體安裝過程見簡書文章：http://www.reibang.com/p/e3e5c9c68f66
vue-cli這個構(gòu)建工具大大降低了webpack的使用難度，支持熱更新掏呼，有webpack-dev-server的支持坏快，相當(dāng)于啟動了一個請求服務(wù)器，給你搭建了一個測試環(huán)境哄尔，只關(guān)注開發(fā)就可以了假消。
2、Vue的單頁應(yīng)用的腳手架程序構(gòu)建
- 進(jìn)入某個目錄岭接，如：E://VueStudy
-
通過命令創(chuàng)建項目：vue init webpack vue-router-demo
進(jìn)入vue-router-demo目錄
-
安裝依賴：npm install
-
測試
注意:ctrl+c退出批處理狀態(tài)
3富拗、進(jìn)行一級路由配置
-
項目結(jié)構(gòu)
在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)
},
{
//任務(wù)中心
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)
}
]
})
- 路由跳轉(zhuǎn)例子：
無參跳轉(zhuǎn)
<router-link to="/">
<img src="./assets/logo.png" class="logo"/>
</router-link>
<router-link to="/task" class="nav-item">任務(wù)中心</router-link>
- 路徑傳參跳轉(zhuǎn)：
<router-link :to="'/course/' + course.courseId">
<img :src="course.cover" />
</router-link>
- js跳轉(zhuǎn)：
_this.$router.push('/');* components文件夾建立相應(yīng)的組件* 具體代碼見github地址：https://github.com/Wuyou1999/VueStudy/tree/master/vue-router-demo1*
- 部分演示圖
