具体报错:
vscode终端:
类型“Vue3Instance<{}, Readonly<ExtractPropTypes<{}>>, Readonly<ExtractPropTypes<{}>>, {}, {}, true, ComponentOptionsBase<any, any, any, any, ... 5 more ..., any>> & ... 4 more ... & Readonly<...>”上不存在属性“handleOpen”。ts(2339)
浏览器控制台:
unknown custom element: <el-row> - did you register the component correctly? for recursive components, make sure to provide the "name" option. found in ---> <app> at src/app.vue <root>
具体情况:
在做vue2项目时,到引入组件阶段,在引入elementui里面的导航菜单。结果报错,具体问题如上。
解决办法:
在网上寻找诸多办法无果,比如加any,在一个json文件中加语句,重启等等。然后突然想看看浏览器端的报错,打开鼠标右键-》检查-》控制台,发现里面的描述报错不一样。然后按照这个错误查找,在一篇文章得到启发,发现是自己在
main.js
中并没有引用
Vue.use(ElementUI)
。结果报错。
给我启发的文章:
Element UI报错:Unknown custom element: - 腾讯云开发者社区-腾讯云 (tencent.com)
https://cloud.tencent.com/developer/article/1429336
希望可以帮助到你,看这篇文章的人。
类型“Vue3Instance & ... 4 more ... & Readonly”上不存在属性“handleOpen”。在网上寻找诸多办法无果,比如加any,在一个json文件中加语句,重启等等。
做项目时遇到使用循环
组件
,因为模式一样,只有数据不一样。但是按照普通的
组件
调用格式来做时
报错
,错误信息为Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.
查询了官方文档,还有其他的资料,发现是循环调用
组件
时,
组件
比
vue
实例后创建,官方文档里写
组件
必须先于实例化
引入
,所以说
组件
没有正确的
引入
。
解决的方式是全局
引入
组件
,并且在
vue
实例化前。
具体代码如下:若在项目中
排查代码后发现, 只要将 .tsx 换成 .jsx 之后发现问题就
不存在
了。 于是将问题定位在了 TypeScript 上。
所以只需要将子
组件
接受的 props 和 state 的
类型
定位成 any 这个问题就可以解决。
Property ‘width’ does not exist on type ‘Combined
Vue
Instance<Record<never, any> &
Vue
, object, object, object, Record<never, any>>’.Vetur(2339)
问题描述:vetur插件
报错
解决方式:
:memo: 螺栓编辑器扩展
此扩展提供了“编辑器”字段
类型
,该字段
类型
是的复杂,轻巧且优雅的WYSIWYG编辑器
组件
。 该编辑器本身由开发,并已获得许可在Bolt中使用。
通过此扩展,您可以像其他任何字段
类型
一样,在contenttypes.yaml定义的ContentTypes中添加type: redactor字段。
注意:如果您已经安装了默认的Bolt项目,则不需要安装。 在这种情况下,它已经存在。 如果您通过其他方式安装了Bolt,则需要运行以下命令:
composer require bolt/redactor
安装后,您可以像其他任何字段一样,将其添加到contenttypes.yaml任何ContentType中。 例如:
blogposts :
name : Blogposts
singular_name : Blogpost
fields :
5、跨模块分析能力(CMA)、分析递归功能和全局标识符的各种问题
6、简化的旧代码修改的设置基准模块
Source..c文件通过分析工具生成3种文件source.c.i、source.c.met、source.c.err。source.c.i文件可以直接生成报告文件,.met、.err这两个文件可以分析出功能结构、关系、特征标准、报告或者进行跨模块分析,对于跨模块分析和剖析器分析需要进行配置,source.c.met、source.c.err、配置文件可以在信息浏览器中显示
2、 规划
2.1、自动生成文件及参数说明
生成自动文档步骤:
1、从文件菜单中选者Auto-Create Project
2、进入Root Folder Name,这是工程的根目录,后面的自动生成的文件都会对应此根目录产生
3、进入Starting Directory,这个源代码目录与工程的根目录相连
4、进入Output File Path,这里可以选择QAC分析后的输出文件,好的情况就是用一个专门的目录和工程根目录相连
5、Replicate source tree structure in output paths通常是为输出部分建立一个子目录结构,这里可以有2种选择,可以选择Parallel to Source Structure为源代码建立一个平行的目录结构,或者选择Sub-path to each source location把规定的输出的子目录嵌入到源工程目录下面
6、选择File Extensions可以加入项目,通常只要选择一个.C文件,包括对.H文件也就被加入
7、为文件夹选择一个个性,可能会使用默认设置为起始点,可以在QAC中选择Configuration菜单
8、点击OK就是建立了工程,包含源文件工程和子文件夹
9、保存文件,外部扩展名为.prj
注意:也可以在已有的项目上自动生成一个文件夹,点击菜单Edit > Auto-create Sub-Folders,其余步骤和以上相同
文件夹参数:包括文件夹名称、默认源路径、输出路径和三种个性
可以进入Edit > Folder Parameters只可以改变文件夹参数,进入Edit > Propagate Changes to Sub-Folders可以改变所有子文件夹参数
2.2、手动生成文档及参数说明
生成手动文档步骤:
1、从菜单File中选择New Project,显示一个对话框New Project Parameters
2、进入Root Folder Name,输入一个项目名称
3、进入Default Source Path为项目初始化文件夹,这个路径可以改变所有子文件夹
4、在Output File Path中选择需要输出的分析文档
5、为工程选个个性
6、点击 OK创建项目,这工程的配置是唯一的文件夹
7、按要求增加更多的子文件夹和文件按要求
8、保存文件,外部扩展名为.prj
文件夹参数;在File > Reopen这项中可以有10多个选项,当没用的文件可以选择Clean-up。
文件和目录的位置时重新打开项目,将检查的存在。如果
不存在
一个条目将显示下面的对话框。有的更正可以自动应用的过程。
2.3、选择输出文件
一般文件夹的层次结构在在左边显示,选择的列表在文件的右边显示
所有的选择都在Browse 和d Reports这两个菜单中
A、如果选择单个文件或一组文件,则使用
B、否则当前所选文件夹,再加上所有子其文件夹,窗体所选内容。这意味着使用这些文件夹中的所有文件。
在浏览器内修改,有可能会改变开始的选择,用Select Files…在File菜单内
2.4、互相比较和环境变化的报告
2.4.1、根路径
2.4.2、基于GUI的环境变量创建
2.4.3、相对路径和环境变量的运用
选择Apply Relative Paths项可以选择相对路径减少的所有文件条目,根目录在右上角,表示保存项目文件的位置,确定路径是否合适相对路径减少。
选择Make file paths in each folder relative to its Default Source Path entry项,如果想要应用一个虚拟的环境变量表达默认每个文件的源路径到其他文件条目下。
在Available Environment Variables列表下,可以添加EVs to Apply至右边框中,将这种替换只发生在项目中的项的文件或关联的路径不受相对路径减少的个性
选择Apply path reduction to personality file entries associated with the project项,为了继续应用相对路径和环境变量在文件路径下的个性定义
选择Remove all path reduction from the project and associated personalities项若要撤消所有的相对路径和环境变量从相关个性设置项目恢复到完全在所有情况下限定的路径
例如,一个被重建的“Diff”项目如下所示与充分的relative道路实施
3、 配置QAC
为应用程序配置主要通过可访问Configuration > Options选项卡,有以下几点:
Annotated Source 附加说明源
Cross-Module Analysis 跨模块分析
Custom Reports 自定义报告
Default Personalities 默认特性
Editor Preferences 编辑选项
Environment 环境
(Product)Extensions (产品)条目
Project File Options 项目文件选择
要查看您的安装与那些一起中的个性的一组在您的项目中定义,可以在Configuration下选择Message Personalities, Analyser Personalities or Compiler Personalities这几个选项
当创建了一个额外的特性,也可以设置它们成为系统默认,在Configuration>Options>Default Personalities下设置
3.1、配置编译器特性
3.1.1、设置系统头文件
在系统包括系统标题选项卡上的标题,设置您系统标头包含路径
可以点击Suppress Output阻止这些头文件,当阻止了那些头文件,一些从特定的头文件或路径中产生的分析数据也不能在.err、.met文件中出现
您可以手动输入是相对于当前项目的路径位置,虽然建议进行完整路径选择和然后将任何选择的道路减少保存项目的过程中的应用操作
3.1.2、设置系统宏
在System Macro Defines下的Project Macros菜单中,设置宏同编译器或开发环境一致,宏可以在Compiler Personality或Analyser Personality设置
3.1.3、设置实现定义的
类型
在c编译器里有3中
类型
定义,在“implementation defined”中选择,如下:
size_t 一种无符号必需
类型
通过sizeof操作表示返回
类型
ptrdiff_t 一种有有符号必需
类型
用减法运算的两个指针来表示
wchar_t 它反映了
类型
的范围内的整数
类型
字符文本和宽字符字符串
在Data Types下的Intrinsic Types条目控制这些
类型
的方法实施,需要以匹配编译器配置环境。所载入的任何相应
类型
声明头文件(e.g. stddef.h, stdio.h)必须反映内在匹配值
类型
。如果不符合,qac提示等级9的警告,如有必要,检查您的头文件确定适当的设置这些选项。
如上所述:QAC随提供一套标准库的头文件,如果想改变这些
类型
定义,必须先明白QAC内部的定义
类型
,因为那些头文件包含一些声明ptrdiff_t, size_t 和wchar_t,还有3种宏指令定义PRQA_PTRDIFF_T, PRQA_SIZE_T,和PRQA_WCHAR_T,
3.1.4、编译器扩展
许多编译器制造商实施 ISO C 的扩展语言定义来利用特定的硬件环境。特别是在嵌入式软件代码的速度和空间是重要
使用的语言扩展的危险是他们妥协可移植性。源代码越来越依赖于编译器和硬件环境。
QA C 是能够分析各种不同的语言变体和扩展,但它不是通常能够解释扩展在语义上。通常,必须配置该工具等,非标准关键字将被忽略。
有几种方法可以为此配置QAC,看附录B–extensions部分
解决办法:打开入口文件main.js,添加以下代码:
import
ElementUI
from 'element-ui';
Vue
.component(
ElementUI
);
/* 或写为
*
Vue
.use(
ElementUI
)
记录一次
类型
错误的解决方案,ts
报错
类型
“Element”上
不存在
属性
“offsetTop”。因为ts默认用的是Element,需要声明为HTMLElement
或是下面这样
当然如果你用的是angular的话,建议用 ElementRef
### 回答2:
Vue
是一个流行的前端框架,而
elementui
是一个常用的UI
组件
库。在大型项目中,如果
引入
全部的
elementui
组件
,会导致加载速度变慢,会浪费浏览器资源,增加项目的负担。因此,按需
引入
elementui
组件
显得非常重要。
按需
引入
elementui
组件
的方法,我们需要使用babel-plugin-component 这个Babel插件,它可以帮助我们只加载项目中实际使用的Element-UI
组件
。具体步骤如下:
1. 安装babel-plugin-component
在项目中安装babel-plugin-component插件:
npm install babel-plugin-component -D
2. 在.babelrc中配置
在项目的根目录下,可以找到.babelrc文件,若没有,请使用以下命令创建:
touch .babelrc
然后在.babelrc文件中添加配置:
"plugins": [
"component",
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
这个配置的意思是将element-ui的
组件
和样式按需
引入
。
3. 按需加载
组件
在编写
Vue
的单文件
组件
时,只需导入需要使用的
组件
即可。
例如,我们只需要使用Button
组件
:
<template>
<button type="primary">按钮</button>
</template>
<script>
import { Button } from 'element-ui'
export default {
name: 'MyButton',
components: {
Button
</script>
需要注意的是,此时的样式并没有导入,还需要手动导入所需的样式表:
import 'element-ui/lib/theme-chalk/button.css';
这样做的好处在于,我们只加载实际需要使用的
组件
和样式,减少了浏览器的负担,提高了项目的加载速度。同时,这种方式也降低了项目的复杂度,使得项目的维护变得更加容易。
### 回答3:
ElementUI
是一个非常流行的
Vue.js
组件
库,其丰富的
组件
和优雅的样式使其成为
Vue.js
中广受欢迎的UI框架之一。在开发过程中,为了避免
引入
整个
ElementUI
库,通常需要按需
引入
Element
组件
,以减小项目体积并减少加载时间。
要按需
引入
Element
组件
,我们需要借助babel-plugin-component插件。这个插件会根据代码中实际使用到的
组件
,只打包需要的
组件
库代码,从而减小打包后的文件大小。
下面是按需
引入
ElementUI
组件
的步骤:
1. 安装babel-plugin-component插件
npm install babel-plugin-component -D
2. 在.babelrc文件中配置插件
"presets": [
"@babel/preset-env"
"plugins": [
"component",
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
其中libraryName指定了需要
引入
的
组件
库名称,styleLibraryName指定了默认样式名称。
3. 在需要使用Element
组件
的文件中,按需
引入
相应
组件
例如,我们需要使用
ElementUI
中的Button
组件
,则需要在需要使用该
组件
的文件中,按以下方式
引入
:
import
Vue
from '
vue
';
import { Button } from 'element-ui';
Vue
.use(Button);
我们先从element-ui库中导入Button
组件
并注册到
Vue
实例中,在
Vue
.use()中可以传递其他
组件
(比如Table等),
Vue
会自动注册这些
组件
到全局。
当然,我们也可以通过直接在
组件
内
引入
的方式来按需
引入
组件
,例如:
import { Button } from 'element-ui';
export default {
components: {
'el-button': Button
这样就可以按需
引入
ElementUI
中需要的
组件
了。通过对
组件
的按需
引入
,可以大大减少打包体积和加快网页响应速度,提高用户的使用体验。