vue+ts项目对app类型限制

烽烟 等级 511 1 0

描述

做一个ts+vue+element-plus项目的时候总是有警告

消除警告

  1. src/plugins/element.js文件后缀名改成ts
  2. 在element里面还要对脚手架现有的代码进行类型限制

在element.ts中引入

import { App } from 'vue'

在element.ts中 对参数app和函数返回值进行类型限制

export default (app:App<Element>):void => {
  locale.use(lang)
  components.forEach(component => {
    app.use(component)
  })
  // app.use(ElButton).use(ElFormItem).use(ElForm).use(ElInput).use(ElLink).use(ElMain).use(ElMenu).use(ElHeader).use(ElContainer).use(ElAside)
}

修改后的element.ts文件

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElLink,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElSubmenu,
  ElRow,
  ElCol,
  ElAlert
} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale'
import { App } from 'vue'

const components = [
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElLink,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElSubmenu,
  ElRow,
  ElCol,
  ElAlert
]

export default (app:App<Element>):void => {
  locale.use(lang)
  components.forEach(component => {
    app.use(component)
  })
  // app.use(ElButton).use(ElFormItem).use(ElForm).use(ElInput).use(ElLink).use(ElMain).use(ElMenu).use(ElHeader).use(ElContainer).use(ElAside)
}
收藏
评论区

相关推荐

🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
Typescript入门最佳姿势
前言:Typescript 是前端当中一门饱受争议的技术,有人爱有人恨。在本文中,我不会劝你使用或者不使用 TS,而是会站在一个客观的角度,探讨 TS 这门技术所解决的更本质的问题(即 JS 类型问题)及其解决方案(TS 只是其中一种)。希望阁下看完这篇文章之后,能够超脱于 TS 本身,看到更加本质的问题,看到更多的解决方案。之后具体用不用,就是阁下自己的事
TS 的脚步已经拦不住,代码撸起来
前言 vue3已经发布了,ts的脚步已经阻拦不住了,还只会es6?别想了,人家都已经在行动了,以下是ts的基本系列教程,ts的基本语法,高级语法等,以及在vue项目中如何应用ts,跟着我赶紧撸起来吧。 基本数据类型 数字 const a: number  3; 字符串 const b: string  "1
Android动态更新APP图标
但凡一款用户量有一定的规模之后,运营都会在逢年过节的时候做一些活动来提高日活,促销商品等。所以为了配合活动,我们开发也需要在App启动图标上做出活动的效果,换一个活动图标,而且还在不额外发布版本的情况下。 效果演示图: 实现步骤 1.首先在AndroidManifest中创建一个activity的别名,用于替换启动页的ac
Hybrid APP基础篇-_Native、Hybrid、React Native、Web App方案的分析比较
说明 Native、Hybrid、React、Web App方案的分析比较 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app、web app与native app工具的初步比较与分析
全面解析vue中的nextTick
为什么要用nextTick请看如下一段代码new Vue({ el: 'app', data: { list: }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/a
开发 vue3 + ts + vite / webpack 的管理系统
cooladmin 地址 演示 账户:admin 密码:123456 介绍 由来cooladmin自 2018 年初以来,一直本着快速通用开发为理念,同时看重每个页面的设计,无论在代码上还是 UI 设计上都受到广大开发者的喜爱。cool是酷的意思,admin一般的认知是
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
基于TypeScript从0到1搭建一款爬虫工具
前言今天,我们将使用TS这门语言搭建一款爬虫工具。目标网址是什么呢?我们去上网一搜,经过几番排查之后,我们选定了这一个网站。https://www.hanju.run/ 一个视频网站,我们的目的主要是爬取这个网站上视频的播放链接。下面,我们就开始进行第一步。第一步俗话说,万事开头难。不过对于这个项目而言,恰恰相反。你需要做以下几个事情:1. 我们需要创建
Vue3.0系列——「vue3.0性能是如何变快的?」
前言1. 先学习vue2.x,很多2.x内容依然保留; 2. 先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS。 为什么学习vue3.0? 性能比vue2.x快1.2~2倍 按需编译,体积比vue2.x更小 组合API(类似React Hook) 更好的TS支持
某站App签名算法解析(一)
一、目标我们来分析某站 App的sign签名算法,先搜索一下 游戏 ,抓包结果: 二、步骤 这个sign依然是32位的字符串都9020年了,这种规模用户的App应该是不会裸奔在java层了,我们就直接一点,在so里面搜索 sign可惜没有结果…… 藏起来的东西一定是重要的东西so层导出函数给java层调用,有两种方法,一种是静态注册,直接会体现在so的导出表
一篇文章带你使用Typescript封装一个Vue组件
搭建项目以及初始化配置vue create tsvuebtn 这里使用了vue CLI3自定义选择的服务,我选择了ts、stylus等工具。然后创建完项目之后,进入项目。使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的「bin文件目录地址」放到环境变量的path中)。然后,我进入编辑器之后,进入设置工作区,随便设置一个
操作系统学习笔记 原来自旋锁还可以这样实现!
在java中我们知道对线程使用CAS(compare and swap)来实现自旋锁,在没有学习操作系统之前,我以为这是唯一一种方法了。但是今天学到了操作系统中的同步互斥,终于明白了原来CAS、TS、Swap这些都是硬件提供的原子操作罢了!不仅CAS可以实现自旋锁,TS(Test and Set)同样可以! 临界区 临界区进程中访问临界资源的一段需要互斥执行
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术
vue+ts项目对app类型限制
描述做一个ts+vue+elementplus项目的时候总是有警告 消除警告 1. 将src/plugins/element.js文件后缀名改成ts 2. 在element里面还要对脚手架现有的代码进行类型限制 在element.ts中引入jsimport App from 'vue' 在element.ts中 对参数app和函数返回值进行类型限制jse

热门文章

el-menu的default-active属性

最新文章

el-menu的default-active属性