8.28学习日志

15. 回顾

1. 前后台分离开发思想
2. js语法（ecmascript）
3. vue工程，定制
   vue-element-admin
4. html、css
   块元素，行内元素
   选择器，伸缩盒布局
5. vue
   实例
   {
   data(){
   return { }
   },
   methods:{ },
   created(){},
   mounted(){}
   }
   模板语法
   1. 双大括号
   2. 列表渲染 v-for :key
   3. 条件渲染 v-if="" v-else
      事件机制
      @click=“foo”
      @click=“foo()”
      @click=“dialogVisible = true”
      @click.prevent=“foo”
6. 业务

1. 高德地图 （实时）
2. highcharts 数据可视化工具
3. 地图图表
4. 基本布局

16. highmap
    官网，highcharts官网的文档相对于echarts比较全面。
17. 安装

<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highmaps/modules/map.js"></script>

2. 获取地图数据文件（地图数据集）

1) 获取一个js文件(推荐)
  <script src="https://data.jianshukeji.com/geochina/china.js"></script>
  <script src="https://data.jianshukeji.com/geochina/shanghai.js"></script>
  <script>
      var mapdata = Highcharts.maps['cn/china'];
  </script>

2) 获取一个json数据
  使用之前要先安装jQuery
  $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(data) {
      var mapdata = data;
  });

3. 编程

1) html
  <div id="container" style="hight:500px"></div>
2) js
  var map = Highcharts.mapChart('container', {
    series: [{
      mapData: mapdata,
      data: [{
          name: '北京',
          value: 2000,
          rank: 1
      }, {
          name: '上海',
          value: 1500,
          rank: 2
      }],
      joinBy: 'name'
    }]
  })

17. 业务

1. 技术选型
   使用什么技术来完成页面的重构？

1. 高德地图
  实时地图，导航
2. highcharts
  数据可视化（图表 ，折线图，曲线图，柱状图，饼状图...）
  地图 highmap
3. elementui
  网页常见元素
  按钮
  表单: 输入框，下拉菜单，
  表格，模态框
  ...
4. 自定义页面
  以上组件无法完成的页面，需要我们自己编写html与css

18. 字体图标库的应用

1. iconfont，登录
2. 选取喜欢的图标，加入到购物车，加入到项目中
3. 产生css文件
   http://at.alicdn.com/t/font_2033594_3i6jsn9xu2m.css
   将css通过link导入到public/index.html中
4. 使用
   
5. 自定义样式
   .other {
   color:lightblue;
   font-size:24px;
   }

19. svg图标

1. iconfont，登录
2. 下载svg图标
3. 将svn拷贝到src/icons/svg
4. 在路由src/router/index.js中使用

20. 编程路由导航

1. 添加页面

问题：

1. Error: spawn xxxx ENOENT原因与解决
   环境变量中确实了system32
   %SystemRoot%\system32
2. @/pages/Map 该模块找不到
   src/
   pages
   Map.vue
3. 404
   访问网页（路由），找不到该路由指定的页面
   / 首页
   /map src/pages/Map
   /realTime src/pages/RealTime
   /a