标签: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>
标签:web new 文件 hal bsp npm from roc rgba
原文地址:https://www.cnblogs.com/youyuan1980/p/14643211.html