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，我会近期丰富一下,喜欢就多多支持哈

猜你喜欢