There are several ways to introduce external files into vue3+typescript

(eg: introduce echarts)

The first method:

1. script import in indext.html

<div id="app"></div>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>

2. Use on. vue page, declare first and then use

<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'));

}

In this way, it can be used correctly

The second method

1. In the project directory, npm install echarts --save

2 in main.ts, it can be imported globally or locally

The global import code is as follows

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

The local import code is as follows

let echarts = require('echarts/lib/echarts')

// Introduce line chart and other components
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')

// Bring in a prompt box and title Components, legend
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//Legend translation scrolling

Vue.prototype.$echarts = echarts

2 on the. vue page

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

The third method

1. In the project directory, npm install echarts --save

2. In the. vue page, you can import directly or on demand

The global import code is as follows

import echarts from 'echarts';

The local import code is as follows

let echarts = require('echarts/lib/echarts')

// Introduce line chart and other components
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')

// Introduction of prompt box and title component, legend
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//Legend translation scrolling

2 on the. vue page

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

What's wrong, we need to correct it