Vue+elementUI+echarts项目从零开始使用总结

一、创建vue项目（Vue-cli脚手架）

可以看Vue环境搭建（Vue-cli脚手架）

二、使用axios

• 安装axios

npm install axios

在项目目录中打开terminal命令行输入

• main.js中全局引入axios

import axios from 'axios'

• main.js注册axios组件

Vue.prototype.$axios = axios

三、使用elementUI

• 安装elementUI

npm i element-ui -S

• 全局引入elementUI
• main.js中全局引入elementUI，样式需要单独引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

• main.js注册ElementUI组件

Vue.use(ElementUI)

四、使用echarts

• 安装echarts

npm install echarts

• 引用echarts（两种方式，这里使用的是全局引用）

import echarts from 'echarts'

• 注册echarts组件

Vue.prototype.$echarts = echarts

Ps: 局部按需引用：
如果使用较多可以写在main.js里

//引入基本模板
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 // 引入组件

三、项目结构

参加文章：Vue项目目录结构优化总结

四、可以开始coding了~

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~