（mac）配置vue

安装参考：https://www.jianshu.com/p/cc722eba1f46

1. 安装brew（一个安装、卸载软件的程序）

https://blog.csdn.net/poppy_rain/article/details/88406390

• 安装：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
• 查看brew版本：brew -v

2. 安装node.js（javascript运行环境）

https://www.cnblogs.com/milo-xie/p/6581188.html

• 到官网https://nodejs.org/zh-cn/download/下载，选择Macintosh Installer
• 安装
• 用终端验证是否成功安装, 输入 node -v
• 输入 node 进入操作

• 获取nodejs模块安装目录访问权限：sudo chmod -R 777 /usr/local/lib/node_modules/
• node卸载：https://www.jianshu.com/p/3e0206dd23ac

3. 安装 淘宝镜像 （npm）

• npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 安装webpack

https://blog.csdn.net/github_40020301/article/details/80857223

• cnpm install webpack -g
• webpack -v

5. 安装vue脚手架

• cnpm install vue-cli -g

6. 运行

• 在硬盘上找一个文件夹放工程用的，在终端中进入该目录：cd 目录路径
• 根据模板创建项目：vue init webpack-simple 工程名字<工程名字不能用中文>

如：vue init webpack-simple demo1

• cd 命令进入创建的工程目录：cd demo1

注意：下面三步都是要进入到当前工程目录后执行的。

• 安装项目依赖：cnpm install
• 安装 vue 路由模块vue-router和网络请求模块vue-resource：cnpm install vue-router vue-resource --save
• 启动项目：npm run dev

7. 其它

配置element-ui：https://www.jianshu.com/p/9348761444e1

配置echart：npm i echarts -S

//main.js文件：

import Vue from 'vue'

import ElementUI from 'element-ui'
import '../node_modules/element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

import App from './test/test1.vue'

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

Vue.config.productionTip = false

var app = new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
//  render: h => h(App)
})

8. 使用参考官网：https://cn.vuejs.org

9. 以下遇到的问题：

• v-for报"Elements in iteration expect to have 'v-bind:key' directives"错误：需要在后面加上:key

v-for="(item, $index) in tableDatas" :key="item.id"

• echart图的更新：

正确应用如下：

this.option.series[0].edgeLabel = {
    normal: {
        show: edgelableShow,
        textStyle: {
            fontSize: 10
        },
        formatter: "{c}"
    }
}
this.myChart.setOption(this.option)

错误事例：

this.option.series[0].edgeLabel.normal.show= edgelableShow
this.myChart.setOption(this.option)

this.option.series[0].edgeLabel.show= edgelableShow
this.myChart.setOption(this.option)

• v-bind使用：驼峰形式

:style="{backgroundColor: '#ccc',width: '40px', height: '20px', margin:'0px 0px 5px 0px',}"