首先看下初始的项目目录
需要额外安装
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,我会近期丰富一下,喜欢就多多支持哈