Vue实战开发--后台管理系统Vue+Element ui（2）

第二节讲引入Element ui和vue路由使用

1.Element ui

Element ui 官方文档：Element - The world's most popular Vue UI framework

1.2全局引入Element ui

安装npm i element-ui -S，-S等价于--save--dev

--save：将保存配置信息到pacjage.json。默认为dependencies节点中。

--dev：将保存配置信息devDependencies节点中。

在mian.js入口文件中引入，import引入Element ui和样式，并Vue.use全局使用。

main.js文件

import Vue from 'vue';
import App from './App.vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

1.3局部引入Element ui

这里暂时不提及

2.Vue路由使用

引入npm i [email protected]，这里使用指定版本。

在根目录下新建router文件夹，router文件夹下新建index.js文件，所有路由逻辑待会编写在这个index.js文件。

首先引入vue和vu-router，此处注意大小写！！！new一个VueRouter并用router接收，这样做是为了方便向外暴露router，进行修改配置mode为history，以数组的形式传入路由相关信息，用routes接收。

index.js文件

import Vue from 'vue';
// 注意这里模块是小写vue
import VueRouter from 'vue-router';

Vue.use(VueRouter)
// routes是一个数组！！！！
const routes = [
    {
        path:'/',
        name:'Home',
        component:()=>import('../view/Home')
//这个Home.vue页面待会会新建
    }
]

const router = new VueRouter({
    mode:'history',
    routes
})

export default router;

 在根目录下新建view文件夹，view文件夹下新建Home.vue页面。

Home.vue文件

在App.vue中写入，Home页面会展示过来，当然不仅仅是Home页面，新建其他页面绑定路由都可以。将vue原有的样式全部删除，后面会有影响。

//App.vue文件

3.路由切换（重要）

改写HelloWorld.vue文件

//Helloworld.vue文件的template标签内容。

在view文件夹下新建User.vue测试所用。

//User.vue文件

更改index.js文件，添加/User路由，选择正确路径。

//index.js文件的routes数组

const routes = [
    {
        path:'/',
        name:'Home',
        component:()=>import('../view/Home')
    },
    {
        path:'/user',
        name:'User',
        component:()=>import('../view/User')
    }
]

在App.vue中引入HelloWorld.vue组件。

//App.vue的script部分

自此，可以通过两个按钮切换路由、切换页面。