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

时间：2021-04-12 12:31:47 收藏：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>