idea新建vue项目,整合element UI,echarts,axios

一.新建VUE项目

安装VUE插件

选择新建VUE项目

输入项目名，路径等

然后一直点next

编译项目

输入 npm install

启动项目

输入 npm run dev

新建页面为index

在index.vue文件里面写

<template>
    <div id="index">
        <p>首页</p>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

在router/index.js文件里面写

import index from '@/components/index' 
{
      path: '/index',
      name: 'index',
      component: index
    }

访问http://localhost:8080/#/index

备注：新建新的vue页面，启动项目如遇到启动报错

解决方案

注释掉webpack.base.conf.js 里面的…(config.dev.useEslint ? [createLintingRule()] : []),

二.VUE整合Element

https://element.eleme.cn/#/zh-CN/component/tooltip官网

下载element

npm i element-ui -S

在router/index.js 下引入element

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import index from '@/components/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/index',
      name: 'index',
      component: index
    }
  ]
})

修改在index.vue

<template>
  <div>
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>

    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>

    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A'],
        radio: '1',
        num: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

访问http://localhost:8080/#/index

三.VUE整合echarts图表

https://echarts.apache.org/zh/index.html官网

下载echarts

npm install echarts --save

在router/index.js 下引入echarts

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import * as echarts from 'echarts';




Vue.config.productionTip = false

Vue.use(ElementUI);
Vue.prototype.$echarts = echarts;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

修改index.vue文件

<template>
  <div>
    <div style="width:500px;height:500px" ref="chart"></div>
  </div>
</template>
<script>
  export default{
    data () {
      return {};
    },
    methods: {
      initCharts () {
        let myChart = this.$echarts.init(this.$refs.chart);
        console.log(this.$refs.chart)
        // 绘制图表
        myChart.setOption({
          title: { text: '在Vue中使用echarts' },
          tooltip: {},
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      }
    },
    mounted () {
      this.initCharts();
    }
  }
</script>

访问http://localhost:8080/#/index

四.VUE整合axios

下载axios

npm install --save axios vue-axios

在router/index.js 下引入axios

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import * as echarts from 'echarts';
import axios from 'axios'
import VueAxios from 'vue-axios'


Vue.config.productionTip = false

Vue.use(VueAxios, axios)

Vue.use(ElementUI);
Vue.prototype.$echarts = echarts;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

修改index.vue

<template>
  <div>
  </div>
</template>
<script>
  export default{
    data() {
      return {
      }
    },

    mounted() { //钩子函数
      this.$http.get('http://localhost:4554/*********').then((response) => {
        console.log(response.data)
      })
    }
  }
</script>

访问http://localhost:8080/#/index