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

1、ElementUi3框架

npm install element-plus --save

引入框架

--main.js

import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.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>