vue脚手架 路由插入自定义组件

最新推荐文章于 2023-02-28 10:00:38 发布
最新推荐文章于 2023-02-28 10:00:38 发布
阅读量200 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64207574/article/details/122657648
版权

先看两个图片

创建的组件命好标签名

2，在需要插入的路由中先import导入（通过路径导入）
3，在通过组件模板components获取组件名字；

4，最后插入到body中

如果你是vue对象插入的话还可以用通过components方法直接创建插入，如下

 

 

农夫三拳有点疼=-=
关注
vue2(5)之自定义指令v-focus&v-color&v-loading/默认插槽/具名插槽/作用域插槽/路由vueRouter基础使用/路由的封装与抽离
qq_66318904的博客
05-04 984
这都是Vue给咱们内置的一些指令，可以直接使用自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能全局注册// // 1. 全局注册指令// inserted 会在 指令所在的元素，被插入到页面中时触发// el 就是指令所绑定的元素el.focus()})局部注册//在Vue组件的配置项中"指令名": {// 可以对 el 标签，扩展额外功能el.focus()
Vue3电影中后台开发纪实（一）：脚手架创建项目
欧阳桫的技术博客
12-17 590
克隆到本地脚手架配置实例根目录/project.config.json{"package" : "cli-creator" , /* 脚手架名称 */ "cmdName" : "ocli" , /* 【用户家目录下】的全局配置文件 */ "rcFile" : {/* 配置文件名 */ "name" : ".oclirc" , /* 给全局配置文件注入的默认数据 */ "default" : {
详解vue组件中使用路由方法
01-19
vue组件中使用路由 1.实现下载路由模块 的命令如下 2.引入路由的命令如下 3.实现接着通过use在vue全局注册使用的命令如下 4.最后将路由表导出的命令如下 5.在main.js中引入路由组件命令如下 6.在App.vue的模板中设置路由出口的命令如下 7.实现添加组件步骤如下 8.把组件添加到路由表的操作步骤如下 以上8点就是关于vue组件中使用路由的步骤，感谢大家对软件开发网的支持。
vue学习之路由组件配置
Low__Profile的博客
10-28 608
vue学习之路由组件配置
vue 路由导入自定义组件的简单方法
weixin_34313182的博客
05-22 1737
原来我是这样做的 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 导入自定义组件 import eStudy from '@/view/eStudy/list' export default new Router({ routes:[ {path:'/eStudy',name:'e...
Vue-day05
weixin_43996260的博客
03-25 850
一、 子组件传值父组件 子组件调用父组件的方法 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的） 子组件可以触发这个事件$emit('事件名字',传递的参数) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
【Vue】路由中引入组件Component的三种方式
michiko98的博客
06-14 6425
vue 路由
vue自定义组件与路由新手使用
qq_38735996的博客
01-17 2359
1。百度使用vue-cli创建一个模板项目 2.创建项目之后，目录如下： 3.项目目录： components存放自己定义的组件， 其中组件是以.vue结尾的文件 4.创建自定义组件，以header.vue为例 组件的格式均为如下格式，有template标签，script标签，style标签， template标签用来定义该组件在页面上现实的内容，script标签内容是该组件包含...
vue路由+脚手架
Lin_25937的博客
10-11 2819
vue路由，脚手架
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
希望每天都能进步一点点
06-25 2648
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
第四阶段08-基于element-ui的vue2.0脚手架(续)
最新发布
aiheshuicxy的博客
02-28 499
第四阶段08-基于element-ui的vue2.0脚手架(续)
Vue自定义指令
Heartbroken_man的博客
02-09 1378
vue官方有提供给我们自定义像v-model 和 v-show这样的指令，来看看怎么定义 话不多说我们事先用vue官方脚手架创建一个项目 比如我们要定义一个鼠标移入就把当前dom原生透明度显示为0，鼠标移开的时候为1，达到鼠标移入显示，鼠标移开隐藏的效果 function on(element, event, handler) { if (element && event && handler) { element.addEventListener(eve
vue创建组件并添加到路由
04-05 581
通过路由/say_hi访问组件 .vue组件由模板(template),脚本(script),样式(style)三部分组成 模板中存放HTML元素，样式标签下存放CSS样式 import SayHi from '@/components/SayHi' 引入组件 下面代码为组件分配路由 { path: '/say_hi', name: 'SayHi', component: SayHi } 在项目所在目录运行npm run dev 启动项目.
vue 动态添加组件_VUE 动态路由（二）
weixin_39639286的博客
11-23 1808
上一篇介绍了一种动态路由的方案，由前端写好路由表，然后通过登陆用户的角色来匹配出需要的路由。今天来研究下另外一种方案，后端返回路由表，然后生成导航菜单。先讲下场景，同样是做权限控制，要根据登陆者的角色，生成对应角色能访问的路由，并生成菜单，生成菜单可以直接遍历路由，这里不多讲。这种场景中，由后端根据登陆者的信息，返回对应的路由表，然后前端将路由表转换成正确...
Vue.js 脚手架 之 组件的创建与使用
毛没齐的博客
08-01 5589
使用之前要创建 在 components 文件下创建一个自己的 组件文件（.vue） 初始结构为 &lt;!--html区域--&gt; &lt;template&gt; &lt;/template&gt; &lt;!--JS区域--&gt; &lt;script&gt; export default { name: "hw" } &lt;..
Vue---在vue路由中配置组件的两种方式
前端与计算机相关知识的分享，博主的qq523235674
02-19 769
1.引入组件后直接在路由中配置（不推荐，组件属于静态引入，无论组件是否使用，组件都已经加载了，加重渲染性能） import login from '../views/login' const routes = [ { path: '/login', name: 'login', component: login ] 2.路由赖加载的方式（推荐，组件属于动态引入，组件需要时再加载组件） const routes = [ {
vue 组件和路由 cdn引入方式的写法
盏茶作酒的博客
12-16 1748
组件component的写法有全局写法和局部写法，全局写法在所有vue实例中都可用，局部写在一个vue实例里面 全局写法： <root></root> Vue.component('root',{template:'<div>全局全局</div>'}) 这样我们就把就定义了一歌全局组件,root,直接使用<root>标签调用，就把组件中的template模板内容渲染到<root></root>标签里了！ 局部写法：
Vue之----路由嵌套
aaa123_456aaa的博客
11-20 2198
1、嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。（其实就是套娃操作罢了，跟后端的视图跳转路径蛮像的）： 2、 创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件： Profile.vue <template> <h1>咸鱼_翻身1</h1> </template> <script> export default { name: "UserList" } &lt
vue--创建组件配置路由（二）
qq_40693615的博客
05-19 1203
有关于组件和路由： 组件是我们根据需求封装出来的HTML页面 路由是一个项目中的枢纽，调配我们创建的各个组件，让不同的页面可以进行切换 模块化组件 就是把多个功能拆分成一个一个的vue文件，让他们自己有一定的独立性 使用组件 -> 先注册组件 template -> 编写组件 组件模块化之后创建的组件都只需要挂载到App.vue中 我们要做的是在template标签集中编写文件。 在component/common 的文件夹下创建 Home.vue文件 写一下home.vue的页面
Vue CLI 3.0构建自定义组件库教程
"本文主要介绍如何使用Vue CLI 3.0构建自定义组件库，包括创建组件库、预览示例、文档网站、自动化脚本和发布流程。适合对前端框架和组件库开发感兴趣的开发者参考学习。" Vue CLI 3.0 是一个强大的工具，用于快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值