vue3路由设置和安装elmentUI

news/2024/11/8 4:35:20/

Vue3设置路由

1. 首先安装路由

npm install vue-router

2. 在min.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'// createApp(App).mount('#app')
const app=createApp(App)
app.use(router)
app.mount('#app')

3.App.vue中添加 <router-view></router-view>

<template><div id="app"><router-view></router-view></div>
</template><script>export default {name: 'App',}
</script><style></style>

3.新建login.vue组件

在这里插入图片描述

4.新建router.js文件

import { createRouter,createWebHistory } from "vue-router";
import Login from "@/components/login/Login";
const router = createRouter({history:createWebHistory(),routes:[{path:'/login',component:Login,}]
})
export default router;

5.访问页面http://localhost:8081/login
在这里插入图片描述
OK!

Vue3引用elementUi

1. 安装elementUi

npm install element-plus --save

2.mian.js引用组件,也可以按需引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
import ElmentUI from 'element-plus'// createApp(App).mount('#app')
const app=createApp(App)
app.use(router)
app.use(ElmentUI)
app.mount('#app')

3.测试

在这里插入图片描述

OK!

在这里插入图片描述


http://www.ppmy.cn/news/514836.html

相关文章

二、python Django路由[基本操作、路由反向解析、路由重定向]

django 3.2.13 一、路由 1.1 urls.py 基础&#xff1a; # 主urls文件 from django.contrib import admin from django.urls import path,includeurlpatterns [path(admin/, admin.site.urls),// 读取根目录的路由path(index/,include(app1.urls))// 读取app目录里面的路由&…

Vue的路由导航

一、要学习vue-router就要先知道这里的路由是什么&#xff1f;为什么我们不能像原来一样直接用标签编写链接哪&#xff1f;vue-router如何使用&#xff1f;常见路由操作有哪些&#xff1f;等等这些问题&#xff0c;就是本篇要探讨的主要问题 二、vue-router是什么 这里的路由…

mapboxgl中的symbol碰撞检测随笔

在mapboxgl里面&#xff0c;symbol的碰撞检测是通过计算symbol的二维边界框&#xff0c;然后设置顶点透明度来实现symbol淡入淡出效果来模拟碰撞。 GridIndex是一个二维空间数据结构&#xff0c;使用一个 2D 平面作为“视口”——即设备屏幕的平面。 碰撞检测算法的输出用于将…

教你做4F上外网和路游设置

映射IP建外网服务器 端口映射软件内有注册码-在线解决SF网络单机问题 http://218.22.112.158/mir2/portmapv1.0.exe 注意: 红灯:端口被使用 绿灯:启动成功 把端口映射软件所在的机子 系统时间改为2003年之前&#xff0c;比如&#xff1a;2002/01/01 新增SQL曰志清楚器(12月30号…

深入理解express框架的匹配路由机制

现在node的web框架有很多&#xff0c;除express 还有koa egg等等。 但它们本质上还是基于原生node框架的http。其实框架都大差不差&#xff0c;主要是观摩和学习。本篇文章主要记录下自己在node爬坑之路上的经历和收获&#xff5e; 本文主要实现express的功能之一&#xff0c; …

浏览器访问ingress-nginx

一、总体演示 1. 部署ingress-nginx 方法. wget https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.3.0/deploy/static/provider/cloud/deploy.yaml 但是需要更改里面的image 或者复制下面 apiVersion: v1 kind: Namespace metadata:name: ingress-…

(3)华为ensp--静态路由

1.什么是静态路由&#xff1f; 静态路由是由用户管理员在路由器中手动配置的固定路由&#xff0c;因为是人工配置的&#xff0c;所以当网络的拓扑结构或链路的状态发生变化时&#xff0c;需要我们手动修改路由表里面的相关信息。 是一种路由的方式&#xff0c;路由项&#xf…

react 的 路由传参

1、路由传参 1、动态路由传参 使用prop进行接收 props.match.params.参数名 2、query传参 this.props.history.push({ pathname: ‘路由’, query:{参数名&#xff1a;参数值} }) 接收: this.props.location.query.参数名 3、state传参 this.props.history.push({ pathname…