码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2021-04-12 12:31:47      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:web   new   文件   hal   bsp   npm   from   roc   rgba   

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框架

标签:web   new   文件   hal   bsp   npm   from   roc   rgba   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!