Vue3项目下载并使用element-plus及echarts的方法

本文介绍: 帮助正在学习 vue3 + ts 的小伙伴分享下载和使用 element–plus和Echarts的方法

使用 element–plus：

npm install element–plus —s av e

import elementPlus fro m ‘element–plus‘

import ‘element–plus/dist/index.css‘

3、按需引入

下载：npm install -D unplugin–vue–components unplugin–auto–import

main.js 引入：import el em entPlus fro m ‘el ement–plus‘

vue.config.js中配置：

        const AutoImp o rt = require(‘unplugin–auto–import/webpack‘)

        const Co mp onents = require(‘unplugin–vue–component s/webpack‘)

        const { ElementPlusRes olver } = require(‘unplugin–vue–component s/resolve rs‘)

        configureWeb pack: {

                plugin s: [

                        AutoImp o rt({

                                resolve rs: [ElementPlusRes olver()],

                        }),

                        Co mp onents({ resolve rs: [ElementPlusRes olver()],

                         }),

                ],

        }

但是，只引入了el ement-plus，我们是无法使用 icon 图标的，所以需要下载和引入icon 图标。

1、下载

npm install @el ement-plus/icons-vue

2、引入

页面中引入：

        import { Ar rowDown, Document } from “@el ement-plus/icons-vue“

注册组件：

        com p onents: { Ar rowDown, Document }

页面中使用：

        <el–icon><document /></el-i con>

        <el-i con><arrowDown/></el-ic on>

使用Echarts：

1、下载

npm install echarts –save

2、引入

import * as echarts from ‘echarts‘

3、使用

<div id="charts"></div>

    function initChart() {
      var chartDom: HTMLElement = document.getElementById(
        "charts"
      ) as HTMLElement;
      var myChart = echarts.init(chartDom);
      var options = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      options &amp;&amp; myChart.setOption(options);
    }
    onMounted(() => {
      initChart();
    });

tips：可能遇到下载报错的问题，下载时后缀 添加—legacy–peer–de ps 即可

最后为学习v3+ts的小伙伴们安利个vsCode的插件：自动 生成 ts 类型 工具

1、扩展中下载 json to ts

将要转的数据放在jon 文件中

新建 index.json 文件

[

{

“id“: 1,

“name“: “海绵宝宝”,

“sex“: “男”

},

{

“id“: 2,

“name“: “海绵”,

“sex“: “男”

},

{

“id“: 3,

“name“: “宝宝”,

“sex“: “男”

}

]