【Vue】Vue前端整合Element Ui—Vue下载安装axios、echarts依赖

迷南。 2023-09-23 14:42 83阅读 0赞

## **目录** ##

一、Vue前端整合Element Ui

整合1：插件

整合2：安装 element-ui组件

整合2：Element UI 引入

二、下载axios、echarts

1、NPM 安装axios

2、NPM 安装 ECharts

Vue引入Echarts

创建echarts01.vue测试代码

三、查看是否下载成功

--------------------

## 一、Vue前端整合Element Ui ##

#### 整合1：插件 ####

*  **安装好vue项目后，进入到项目目录，执行命令**

vue add element

*  **整合步骤1：确定引入方式（全部引入、按需引入）**

![2f18ffa8df5a4d158029c1e628bf1c14.png][]

*  整合：

![65c59b5557104a9fa6a5638ee0aabf22.png][]

--------------------

#### **整合2：安装 element\-ui组件** ####

npm i element-ui -S

![902f759285124c1d83ee963b7d40e1e4.png][]

#### 整合2：Element UI 引入 ####

*  官方提供了2种引入方式：**完整引入、按需引入**
    
    > 1.  完整引入：引入了eui所有的组件，学习时/开发时常用
    > 2.  按需引入：引入需要的组件，生产环境下使用。
 *  **完整引入**
    
    > 1.  导入 element ui 组件库
    > 2.  导入 element ui css样式
    > 3.  并将element ui 注册给vue

![ae551398ae0746cfa75696bdfee56ff7.png][]

/* 导入element-ui样式
    */
    import 'element-ui/lib/theme-chalk/index.css'
    
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    /* element-ui所有组件
    */
    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

--------------------

## 二、下载axios、echarts ##

### 1、NPM 安装axios ###

npm install --save axios

### 2、NPM 安装 ECharts ###

//默认安装最新版本
    npm install echarts --save
    
    // 安装4.9版本的echarts
    //在echarts4.9以后的版本中移除了map地图,要想使用地图，下载4.9的版本
    npm install echarts@4.9.0 --save

#### Vue引入Echarts ####

**main.js全局引入 Echarts**

// 全局引入相关包
    import * as echarts from "echarts";
    // 开启echarts
    Vue.prototype.$echarts = echarts;

#### 创建echarts01.vue测试代码 ####

<template>
    	<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    </template>
    <script>
    export default {
      name: 'Echarts',
      data () {
        return {
          msg: 'Welcome use Echarts'
        }
      },
      mounted(){
        this.ech01();
      },
      methods: {
        ech01(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: { text: '在Vue中使用echarts' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
      }
    }
    </script>

--------------------

## 三、查看是否下载成功 ##

**在package.json中进行查看**

![2f12b39d23ba47a6832bf17f92a9e62b.png][]

[2f18ffa8df5a4d158029c1e628bf1c14.png]: https://img-blog.csdnimg.cn/2f18ffa8df5a4d158029c1e628bf1c14.png
[65c59b5557104a9fa6a5638ee0aabf22.png]: https://img-blog.csdnimg.cn/65c59b5557104a9fa6a5638ee0aabf22.png
[902f759285124c1d83ee963b7d40e1e4.png]: https://img-blog.csdnimg.cn/902f759285124c1d83ee963b7d40e1e4.png
[ae551398ae0746cfa75696bdfee56ff7.png]: https://img-blog.csdnimg.cn/ae551398ae0746cfa75696bdfee56ff7.png
[2f12b39d23ba47a6832bf17f92a9e62b.png]: https://img-blog.csdnimg.cn/2f12b39d23ba47a6832bf17f92a9e62b.png