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

Vue实战开发--后台管理系统Vue+Element ui(2),第1张

第二节讲引入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部分

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1322139.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存