浅析vue3+typescript如何引入外部文件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

第一种方法

1、indext.html 中用script引入

<script src="https://oss-emcsprod-public.modb.pro/static/cropper.js"></script>

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

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

3、在.vue页面使用

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、在项目目录下 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、剩下的同第二种方法

　　我使用的第一种方法，后面2、3暂时没有用。

以上是 浅析vue3+typescript如何引入外部文件 的全部内容， 来源链接： utcz.com/z/379926.html

回到顶部