vue引入外部文件_vue3+typescript引入外部文件

javascript

技术文章

开发

vue3+typescript引入外部文件

vue3+typescript中引入外部文件有几种方法

(eg:引入echarts)

第一种方法：

1 indext.html中用script引入

2 在.vue页面使用，先声明后使用

declare let echarts:any;

@Component

exportdefault classabout 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页面使用

@Component

exportdefault classabout 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'{

exportconstSwiper: any

exportconstSwiperSlide: 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页面使用

import echarts from 'echarts';

@Component export default classabout extends Vue{private mounted(): void{ this.ech(); };

private ech(): void{ let lineChart = echarts.init(document.getElementById('lineChart')); }

不对的地方大家多多指正

内容来源于网络，如有侵权请联系客服删除