首页 > 其他 > 详细

【VUE3.0体验】建路由,加入ElementUI3框架

时间:2021-04-11 16:01:34      阅读:14      评论:0      收藏:0      [点我收藏+]

1、ElementUi3框架

npm i element3 -S

引入框架

--main.js

import ‘element3/lib/theme-chalk/index.css‘
import { createApp } from ‘vue‘
import Element3 from ‘element3‘
import App from ‘./App.vue‘

createApp(App).use(Element3).mount(‘#app‘)

2、路由

npm install vue-router

建立页面文件:新建目录views/home.vue,views/test.vue,分别在里面放些显示代码

建立路由文件:新建目录router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
import test1 from ‘@/views/test1.vue‘
import home from ‘@/views/home‘


const router = new createRouter({
    history: createWebHashHistory(process.env.BASE_URL),
    routes: [
        { path: "/", name: ‘home‘, component: home },
        { path: ‘/test‘, name: ‘test‘, component: test1 }
    ]
})
export default router

修改main.js文件,加入路由

import ‘element3/lib/theme-chalk/index.css‘
import { createApp } from ‘vue‘
import Element3 from ‘element3‘
import router from ‘./router/index‘
import App from ‘./App.vue‘

createApp(App).use(Element3).use(router).mount(‘#app‘)

修改APP.vue文件

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/test">About</router-link>
  </div>
  <router-view />
</template>

<script>
export default {
  name: "App",
};
</script>

 

【VUE3.0体验】建路由,加入ElementUI3框架

原文:https://www.cnblogs.com/youyuan1980/p/14643211.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!