标签: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