vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法
(eg:引入echarts)
第一种方法:
1 indext.html中用script引入
<div id="app"></div>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>
2 在.vue页面使用,先声明后使用
<script lang="ts">
import { Component , Vue } from 'vue-property-decorator';
declare let echarts:any;
@Component
export default class about extends Vue{
private mounted(): void{
this.ech();
};
private ech(): void{
let lineChart =echarts.init(document.getElementById('lineChart')); }
这样就可以正确使用
第二种方法
1 在项目目录下 npm install @types/echarts --save(可以用@types/下载的这么写,第三种方法是不可以用@types下载的)
2 在main.ts中可以全局引入也可以局部引入
全局引入代码如下
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
局部引入代码如下
let echarts = require('echarts/lib/echarts') // 引入折线图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar') // 引入提示框和title组件,图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//图例翻译滚动 Vue.prototype.$echarts = echarts
2 在.vue页面使用
<script lang="ts">
import { Component , Vue } from 'vue-property-decorator';
@Component
export default class about extends Vue{
public $echarts:any;
private mounted(): void{
this.ech();
};
private ech(): void{
let lineChart = this.$echarts.init(document.getElementById('lineChart'));
}
第三种方法
1 1 在项目目录下 npm install vue-awesome-swiper --save
2 在shims-vue.d.ts文件添加代码
declare module 'vue-awesome-swiper' {
export const Swiper: any
export const SwiperSlide: any
}
代表从外部注入文件
3 剩下的同第二种方法
第四种方法
1 在项目目录下 npm install @types/echarts --save
2 在.vue页面中直接全局引入也可以按需引入
全局引入代码如下
import echarts from 'echarts';
局部引入代码如下
let echarts = require('echarts/lib/echarts') // 引入折线图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar') // 引入提示框和title组件,图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//图例翻译滚动
2 在.vue页面使用
<script lang="ts">
import { Component , Vue } from 'vue-property-decorator';
import echarts from 'echarts';
@Component export default class about extends Vue{
private mounted(): void{ this.ech(); };
private ech(): void{ let lineChart = echarts.init(document.getElementById('lineChart')); }
不对的地方大家多多指正
vue3+typescript引入外部文件的更多相关文章
- nginx 引入外部文件
http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $ ...
- 引入外部文件的时候为什么省略http:
[摘要]相信很多时候大家在使用网上的实例代码的时候,需要引入外部文件,然而它们通常都是省略了http:,这是为什么呢? 先给大家看一个简单的小例子,引入外部jquery文件: <script s ...
- postman通过引入外部文件实现参数化
postman可通过引入外部文件进行参数化 目录 1.准备好接口信息 2.设置 1.准备好接口信息 这里的usr和psw是要参数化的对象 2.设置 文件准备 添加文件,并设置好循环次数即可
- HTML引入外部文件,解决统一管理导航栏问题。
1.IFrame引入,看看下面的代码 <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 ...
- 【html】【2】html引入外部文件js css
1>引入js 我们只是写了简单必须的html标签,从未给标签添加点击事件,这次页面添加事件. >写入html页面,可以在<head>标签内 也可以在<body>标 ...
- js 引入外部文件之 script 标签
在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...
- react如何引入外部文件的整理
1 引入组件 首先就应该是安装了,安装在环境中后通过 import { Select, Button, Icon, QueueAnim } from 'antd'; 就可以把需要的组件引用进来了~ 2 ...
- 解决引入外部文件(图片、js等)出现 403 net::ERR_ABORTED 的问题
页面中引入外网的链接资源,会产生一个新的http请求.为了安全(URL里可能包含用户信息),浏览器一般都会给这写请求头加上表示来源的referrer 字段. 所以,此时我们需要隐藏外部链接中的refe ...
- Vue项目中引入外部文件(css、js、less)
例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...
随机推荐
- 更新版PowerBI发布了-- Power BI Report Server Update – March 2018
新版的PowerBI server 和 Desktop 终于发布了. 详细增加功能见以下链接: 下载最新版PowerBI Report Server: https://powerbi.microso ...
- spring的7个模块
Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架. Spring ...
- 在VirtualBox中安装BlackArch Linux
作者:荒原之梦 安装前的准备 下载系统映像:BlackArch Linux官网下载页面 在本文中我使用的是BlackArch Linux的Live ISO,这样可以减少安装时下载系统的时间.Black ...
- Sign http
http接口请求参数签名工具类的实现和测试代码 http://blog.csdn.net/5iasp/article/details/52539901 http://www.what21.com/pr ...
- Spring Boot 整合Spring Security 和Swagger2 遇到的问题小结
How to configure Spring Security to allow Swagger URL to be accessed without authentication @Configu ...
- 远程服务器使用phantomjs报错:phantomjs unexpectedly exited. Status code was: 127
原因是因为缺少phantomjs运行的依赖包 Ubuntu尝试: sudo apt-get install libfontconfig centos尝试: 用wget安装phantomjs依赖的lib ...
- 【BZOJ 4016】 [FJOI2014]最短路径树问题
题目链接: TP 题解: 我就是个智障.明明是道大水题,硬是拖了6h. 关于这道题我唯一想说的就是,记得更新拆分后的子树大小!!!我就是ZZ恒(QwQ. 代码: #define Troy 10/26 ...
- NOIP 2017 游记?
Day -1 晚上被dg谈了谈人生,没有卵用 Day 0 早上又被老吕教训了一遍,想打板子,打印机还坏了,老吕又奶了一波题,后来发现一个都没中.之后就出发了,中午吃了点肯德基,妈妈来了,给我了个小袋子 ...
- BZOJ_2962_序列操作_线段树
Description 有一个长度为n的序列,有三个操作1.I a b c表示将[a,b]这一段区间的元素集体增加c,2.R a b表示将[a,b]区间内所有元素变成相反数,3.Q a b c表示询问 ...
- 大数据小视角2:ORCFile与Parquet,开源圈背后的生意
上一篇文章聊了聊基于PAX的混合存储结构的RCFile,其实这里笔者还了解一些八卦,RCfile的主力团队都是来自中科院的童鞋在Facebook完成的,算是一个由华人主导的编码项目.但是RCfile仍 ...