vue3-创建路由

nodev24.19.0npm11.17.0router5.2.0下载router npm install vue-router1.清理文件删除hello.vue2.src 下创建router创建index.ts3.src下创建views创建Home.vue4创建vue TAB模板src下面创建template.vue直接复制 vbase-3-ss-ts5.route下index.ts创建路由 路由模式 类型匹配import { createRouter, createWebHistory} from vue-routerimport type { RouteRecordRaw } from vue-routerconst routes: ArrayRouteRecordRaw [{path: /,name: Home,component: () import(../views/Home.vue)}]const router createRouter({history: createWebHistory(),routes})export default router6.main.ts文件import { createApp } from vue// import ./style.cssimport App from ./App.vueimport router from ./router;createApp(App).use(router).mount(#app)7.app.vuetemplatedivdiv classinitialize初始化/div/div/templatescript setup/scriptstyle style scoped/style----------------------------------------------------------------------------------------------------以上是路由创建显示下面是样式处理1.pulic下创建css下reset.css/** 样式初始化* 浏览器常规样式初始化* el-loading样式调整* el-loading-spinner样式调整*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: ;content: none;}table {border-collapse: collapse;border-spacing: 0;}.el-loading {position: absolute;z-index: 2000;background-color: rgba(255, 255, 255, .7);margin: 0;top: 0;right: 0;bottom: 0;left: 0;-webkit-transition: opacity .3s;transition: opacity .3s;}.el-loading-spinner {top: 50%;margin-top: -21px;width: 100%;text-align: center;position: absolute;}2.index.htmllink relstylesheet href./public/CSS/reset.css3.app.vuescript setup langts/scripttemplate!-- div111/div --router-view/router-view/templatestylehtml,body{width: 100%;height: 100%;}/style