vue2.0（2）

首先看下初始的項目目錄

須要額外安裝

npm install axios --save//vue官方推薦ajax
npm install iview --save //vue前端框架
npm install vuex --save//vuex狀態管理

關於vue-router

初始化文件內容 src/router/index

import Vue from 'vue'
import Router from 'vue-router'
import {routers} from './router';
Vue.use(Router)
// 路由配置
const RouterConfig = {
//  mode: 'history',
    routes: routers
};
export const router = new Router(RouterConfig);

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import { router } from './router'//這裏是引入router/index.js暴露出來的router
//定義全局變量
Vue.config.productionTip = false
import Vuex from 'vuex'
import iView from 'iview'
import store from './store'
Vue.use(Vuex)
Vue.use(iView);
router.beforeEach((to,form,next) => {
    iView.LoadingBar.start();//這裏添加了iview的加載頁面動畫
    next();
});

router.afterEach((to, from) => {
  iView.LoadingBar.finish();//頁面加載成功關閉
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//在這裏引用調用路由
  store,//在這裏引用調用狀態管理
  components: { App },
  template: '<App/>'
})

在src/router下增長router.js

import myfirstPage from '@/views/myfirstPage.vue'

const firstPage={
	path: '/myfirstPage',
    name: 'myfirstPage',
    component: myfirstPage,
}
const initPage={
    path:"/",
    redirect: '/myfirstPage',
}
export const routers=[
	initPage,
	firstPage
]

src/views增長myfirstPage.vue

<template>
	<div>myfirstpage</div>
</template>

<script>
	export default{
		name:"myfirstPage",
		data(){
			return {
				
			}
		}
	}
</script>

<style>
</style>

npm run dev 這樣一個項目就能夠跑起來 爲了不端口衝突 我改爲了8888端口

頁面以下

關於vue-router請關注我另外一篇vue-router，我會近期豐富一下,喜歡就多多支持哈