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: anyexport 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')); }

不对的地方大家多多指正

转载于:https://www.cnblogs.com/ttjm/p/10494905.html

vue3+typescript引入外部文件相关推荐

vue引入外部文件_vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 2 在.vue页面使用,先声明后使用 declare ...
vue3+TypeScript 引入js文件
修改tsconfig.json中的compilerOptions,将"allowJs"设为true,没有则自行添加将"include"字段中将js文件的路径添 ...
Vue3 +TypeScript 引入 BabylonJs（Vue3实现3D）【一篇文章精通系列】
本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果.结合实际案例,详细讲解了如何在Vue3项目中引入BabylonJs,并了解其相关知识.通过本文的学习,相信读者 ...
uniapp vue3中引入外部3D模型(适配App)
uniapp vue3中引入外部3D模型(适配App) 主要方式是通过renderjs来实现的, 因为使用threejs的话需要获取页面上的dom节点, 然后需要把threejs创建出来的canvan ...
vue 引入外部less_Vue项目中引入外部文件的方法（css、js、less）
这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less. ...
【php基础入门】PHP环境搭建与初识php代码书写及演示PHP和JS中遍历数组的区别、引入外部文件等知识点学习笔记
php是什么? PHP是PHP:HypertextPreprocessor(超文本预处理器)的首字母缩写,是一种跨平台的.开源的.免费的脚本语言,其语法吸收了C语言.Java 和 Perl 的特点,利 ...
【极客学院】－python学习笔记-Python快速入门(面向对象－引入外部文件－Web2Py创建网站)
极客学院的课程,感觉很有意思,每节课都很短,但是很干货,我喜欢这个节奏 http://www.jikexueyuan.com/course/203.html 课程背景: Python语言功能强大, 能 ...
vue引入外部文件_vue文件中引入外部js
1.在项目的入口文件中(app.js)定义remoteScript标签 Vue.component('remote-script', { render: function (createElement ...
控制JSP头部引入外部文件编译后在第一行
2019独角兽企业重金招聘Python工程师标准>>> 一.错误引入方法假设当前需要在JSP页面输出xml格式数据,需要引入以下外部文件,通过以下的方式来引入则无法正常输出数据: ...

vue3+typescript引入外部文件

vue3+typescript引入外部文件相关推荐

最新文章

热门文章