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引入外部文件的更多相关文章

  1. nginx 引入外部文件

    http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $ ...

  2. 引入外部文件的时候为什么省略http:

    [摘要]相信很多时候大家在使用网上的实例代码的时候,需要引入外部文件,然而它们通常都是省略了http:,这是为什么呢? 先给大家看一个简单的小例子,引入外部jquery文件: <script s ...

  3. postman通过引入外部文件实现参数化

    postman可通过引入外部文件进行参数化 目录 1.准备好接口信息 2.设置 1.准备好接口信息 这里的usr和psw是要参数化的对象 2.设置 文件准备 添加文件,并设置好循环次数即可

  4. HTML引入外部文件,解决统一管理导航栏问题。

    1.IFrame引入,看看下面的代码     <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 ...

  5. 【html】【2】html引入外部文件js css

    1>引入js 我们只是写了简单必须的html标签,从未给标签添加点击事件,这次页面添加事件. >写入html页面,可以在<head>标签内  也可以在<body>标 ...

  6. js 引入外部文件之 script 标签

    在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...

  7. react如何引入外部文件的整理

    1 引入组件 首先就应该是安装了,安装在环境中后通过 import { Select, Button, Icon, QueueAnim } from 'antd'; 就可以把需要的组件引用进来了~ 2 ...

  8. 解决引入外部文件(图片、js等)出现 403 net::ERR_ABORTED 的问题

    页面中引入外网的链接资源,会产生一个新的http请求.为了安全(URL里可能包含用户信息),浏览器一般都会给这写请求头加上表示来源的referrer 字段. 所以,此时我们需要隐藏外部链接中的refe ...

  9. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

随机推荐

  1. mac下安装Python3.*(最新版本)

    前言:mac系统自带python,不过以当前mac系统的最新版本为例,自带的python版本都是2.*版本,虽然不影响老版本项目的运行,但是python最新的3.*版本的一些语法与2.*版本并不相同, ...

  2. Java并发之CountDownLatch工具类

    一.CountDownLatch工具类介绍 CountDownLatch类是Java并发工具常用的四大工具之一,CountDownLatch允许一个或者多个线程等待其他线程完成工作.假设我们有这样的一 ...

  3. Java 开发环境配置

    window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloa ...

  4. 微信小程序开发库grace vs wepy

    grace和wepy都是辅助小程序开发的开源库,本文对两者做个对比. 注:本文是作者本人的一些拙见,纯粹的技术讨论,不想引起技术信仰之争,欢迎积极.正向的讨论及建议. 如果你还不了解Grace, 请参 ...

  5. 【Service Fabric】小白入门记录 本地Service Fabric集群安装及设置

    本篇内容是自学自记,现在我还不知道Service Fabric究竟是怎么个入门法,反正按照入门教程先进行本地Service Fabric集群的安装,万里路始于足下,要学习总得先把环境装好了才能开始学习 ...

  6. sql server 阻塞查询

    在生产环境下,有时公司客服反映网页半天打不到,除了在浏览器按F12的Network响应来排查,确定web服务器无故障后.就需要检查数据库是否有出现阻塞 当时数据库的生产环境中主表数据量超过2000w, ...

  7. Kali Linux安装中文输入法全纪录

    前言: 我使用的是英文版的Kali,默认没有安装中文输入法,也没有安装小企鹅(我后来才知道),折腾了很久,现在终于可以在Kali里输入中文了(这篇文章就是在Kali里面用leafpad写的).安装的过 ...

  8. 【基于url权限管理 shiro(一)】--基础

    只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源.权限管理包括用户认证和授权两部分.   用户认证 1.概 ...

  9. Vector简单介绍

    /*枚举就是Vector特有的取出方式发现枚举和迭代器很像其实枚举和迭代是一样的因为枚举的名称以及方法的名称都过长了.所以被迭代器取代了枚举郁郁而终了. */ import java.util.*;c ...

  10. SVN更新失败,提示locked 怎么破

    有时在svn更新或提交代码时,会报错,让你cleanup  如果cleanup解决不了,就要删除被锁定的文件夹下的文件,然后就可以更新或提交了 怎么做呢? 1.首先在CMD中进入你工作目录被锁定的文件 ...