Vue warn]: Component is missing template or render function.

news2025/1/17 5:58:25

警告:Component is missing template or render function.
问题声明:
组件缺少模板或渲染功能。

解决问题

方式一:

在写vue项目时,网页没有加载出来东西一片空白,然后控制台出现黄色的警告:

原因是:在引入模块的时候没有写后缀!!!
在这里插入图片描述
加上.vue后就可以正常显示了。

原因:

其实按道理,webpack的规则是允许 .vue .js 文件在引入的时候省略文件名后缀的。

import test from ‘./test.vue’
import test from ‘./test’ //等同于

import test from ‘./test.js’
import test from ‘./test’ //等同于

但是当目录下同事存在 test.js 和 test.vue 文件的时候,会优先引入 .js 文件(js>vue)。

方式二:

新创建的vue文件,没有写模板,里面没写任何东西
在这里插入图片描述
这个时候也会出来警告
写入模板即可

<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style scoped></style>

这样问题就解决了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409302.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

html--盒子的边框属性(border)

content:内容框&#xff08;我们设置的宽高是内容框的宽高&#xff09; padding:内边距 top right bottom left&#xff08;四边--一般默认指定的方向&#xff09; border:边框线包裹了内边距&#xff08;四边&#xff09; margin:外边距 在边框的外面 元素和其他元素的间…

【手把手带你学JavaSE】String类(下篇)

目录前言一、字符串查找二、字符串转换2.1 数值和字符串转化2.2 大小写转化2.3 字符串和数组的转换2.4 格式化三、字符串替换四、字符串拆分4.1 拆分处理4.2 部分拆分4.3 拆分IP地址五、字符串截取六、其他的方法6.1 String trim()6.2 boolean isEmpty()6.3 int length()6.4 判…

vue3与vue2的区别(你不知道细节全在这)

先来说说当下市场开发使用的问题&#xff0c;目前2021年使用vue3开发的企业还是少&#xff0c;基本上都还是以vue2的形式进行开发&#xff0c;vue3的开发模式跟react很像&#xff0c;这时候有人就会想那我学vue3有用么&#xff0c;淦&#xff0c;他喵的&#xff0c;先别激动&am…

Vue开发项目入门——Vue脚手架

1.什么是Vue脚手架 Vue脚手架是Vue官方提供的标准化开发工具&#xff08;开发平台&#xff09;&#xff0c;它提供命令行和UI界面&#xff0c;方便创建vue工程、配置第三方依赖、编译vue工程。 特别注意&#xff1a;Vue脚手架是用来方便开发的&#xff0c;但vue脚手架不是最终发…

Canvas百战成神-圆(1)

Canvas百战成神-圆 初始化容器 <canvas id"canvas"></canvas>canvas{border: 1px solid black; }让页面占满屏幕 *{margin: 0;padding: 0; } html,body{width: 100%;height: 100%;overflow: hidden; } ::-webkit-scrollbar{display: none; }初始化画笔…

【网络请求之Axios】axios的基础用法

1. axios概述 axios 是一个专注于网络请求的库。axios 在请求到数据之后&#xff0c;在真正的数据之外&#xff0c;套了一层外壳。 2.axios的基本使用 2.1 发送get请求 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta cha…

前端:弹幕标签用法详细介绍(跑马灯)

弹幕标签 1&#xff0c;注意弹幕标签marquee&#xff0c;现在一些浏览器是不支持的 2&#xff0c;弹幕标签也叫跑马灯 marquee格式及其含有的属性 1.基本格式 如下&#xff1a; <marquee></marquee>2.一些属性 1&#xff0c;direction属性&#xff1a;表示的…

39.JavaScript中Promise的基本概念、使用方法,回调地狱规避、链式编程

《JavaScript再出发》系列文章阅读《仙宗》发布招仙贴&#xff0c;广招天下道友 文章目录JavaScript中Promise的基本概念、使用方法&#xff0c;以及回调地狱规避一、前言二、Promise基本概念2.1 异步工作的封装2.2 Promise执行结果获取thencatchfinally三、使用Promise解决回调…

qiankun微应用之间、主微应用之间相互跳转方式总结与实践

一、子应用互相访问 1、背景 &#xff08;1&#xff09;未来可能需要做不同子应用菜单的合并&#xff0c;如在bi应用下的侧边栏或者别的地方&#xff0c;需要跳转到数据治理的数仓主题里&#xff0c;或者涉及到子应用值改变&#xff0c;其他应用也需要使用&#xff1b; &…

【JWT鉴权】如何来写一个token令牌认证登录?

目录一. &#x1f981; 话题引入1.2 什么是JWT&#xff1f;二. &#x1f981; 技术体现2.1 引入依赖2.2 编写JWT工具类2.3 编写登录方法2.4 编写JWT拦截器验证令牌2.5 编写要配置拦截的接口三. &#x1f981; 话题终结一. &#x1f981; 话题引入 在做项目过程中&#xff0c;我…

vue-element-ui前后端交互实现分页查询

大体思路&#xff1a; ①添加element-ui分页组件 ②在data里定义几个参数用来存放当前页&#xff0c;每页条数&#xff0c;条目总数以及存放后端分页查询的结果 ③后端使用分页查询&#xff0c;controller层接收当前页以及每页条数的参数 ④前端编写方法发送请求到controll…

用jsp实现简单登入注册界面功能(css美化)(软件idea)

思路&#xff1a;创建登入界面&#xff08;login&#xff09;&#xff0c;再创建登入成功与登入失败界面&#xff08;loginsuccess与loginfail&#xff09;&#xff0c;再创建注册成功界面&#xff08;registersuccess&#xff09;与注册界面&#xff08;register&#xff09;以…

用HTML实现简易版计算器

计算器功能&#xff1a;实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。 运行结果如下&#xff1a; 引入的图片&#xff1a;back.png HTML部分&#xff1a;用table表格添加计算器的按键&#xff0c;给每个按键设置一个相应的单击事件&#xff0c;点击一个按键后…

RuoYi-Vue——图标使用

使用若依的小伙伴们&#xff0c;是否有遇到找图标的烦恼。若依框架里图标分两种&#xff0c; 1.用在表格中的图标&#xff1a; 2.用在菜单及个人信息的图标&#xff1a; 下面我就针对这两种图标给大家总结一下。 1.表格图标&#xff08;ElementUI图标Icon&#xff09; 若依的表…

【JavaScript】五个常用功能/案例:判断特定结尾字符串 | 获取指定字符串 | 颜色字符串转换 | 字符串转驼峰格式 | 简易购物车

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总…

layui数据表格的使用(前端和后端)

数据表格&#xff08;纯前端&#xff09; 快速使用 首先需要引入layui的css和js <link rel"stylesheet" href"../static/layui/css/layui.css"> <script src"../static/layui/layui.js" charset"utf-8"></script>…

如何搭建vue框架-1

提示&#xff1a;前端新人&#xff0c;初来乍到&#xff0c;若文章写的不好大家多包涵。 文章目录前言一、vue是什么&#xff1f;二、ElementUI是什么&#xff1f;三、搭建前的准备四、安装步骤1.安装webpack2.安装vue-cli3.通过vue-cli构建项目4.启动项目5.其他总结前言 基于…

element-ui表格编辑

前言&#xff1a; 准备&#xff1a; element-uivue3vscode 实现步骤&#xff1a; 数据标定打开激活编辑保存 1. 设定需要编辑的表格单元格是否编辑标识 在请求后台表格数据时进行一个二次包装&#xff0c;如果后端已经处理则不需要在进行包装&#xff08;此处包装是否编辑…

手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】

前端的那些基本标签&#x1f353;&#x1f353;模板字符串&#x1f353;&#x1f353;类继承&#x1f353;&#x1f353;参数解析器&#x1f353;&#x1f353;生成页码&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的骨头&#…

react router6.x官方DEMO

Tutorial v6.4.2 | React Router 初始化项目 import React from "react"; import ReactDOM from "react-dom/client"; import {createBrowserRouter,RouterProvider,Route, } from "react-router-dom"; import "./index.css";const …