使用Vue（svg-sprite-loader、vue2-svg-icon）重构svg管网监控图
9月底，接手了一个项目，主要是完成流程单元回路管网的监控。考虑到开发现状，第一版开发采用了HTML、CSS、ECharts、JQuery、SVG（使用工具Visual Graph绘制管道网络图，导出svg文件备用）、.Net、Oracle技术完成。主要完成监控数据的展示、监控切换与跳转。例如：报警类信息、监控指标详细信息的展示；切换、选择、超链接等交互功能。由于目前了解到的管道图数量已接近百张，划分展示层级后，梳理确定了各层级具体业务功能，进行了第二版按层级业务功能划分的代码重构工作。第三版，采用vue框架实现对代码的重构。
确定代码重构内容，包括了以下两点：1.对svg的调用。2.业务功能重构。
一.对svg的调用
vue中调用svg可以分为2类：“不使用插件”和“使用插件”。
1.“不使用插件”：
1.1 可以直接在模板...内添加svg。
1.2（推荐）或者创建一个svg组件。可以定义一个svg，也可以定义多个svg（此时使用
2.“使用插件”（推荐）：
2.1 使用svg-sprite-loader时：
1）安装插件：安装svg-sprite-loader插件后，最好同时安装插件svg-baker-runtime（这是一个svg-sprite-loader需要的依赖，而npm没有自动安装，最头疼的是没...有...报...错!!!白白在此花了很多脑细胞。百度了N多文章，终于找到一位小伙伴的博客，得以解决。）
//package.json内可以查看相关插件
...
"devDependencies": {
...
"svg-baker-runtime": "^1.4.0",
"svg-sprite-loader": "^4.1.3",
...
}
...webpack.base.conf.js内，需要配置svg文件采用何种规则编译。
...
{
test: /\.svg$/,
include:[
path.resolve(__dirname,'../src/icons')
],
loader: 'svg-sprite-loader',
options:{
//symbolId:'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
},
exclude:[
path.resolve(__dirname,'../src/icons')
]
},
...2）js控制动态调用svg文件：接下来创建一个目录src/icons，内部存放svg文件及自动调用所需svg文件的index.js文件。
index.js内部引入了步骤 3）中定义的“组件vue”，并全局注册了这个组件vue，便于调用的时候直接使用
import Vue from 'vue'
import SvgIcon from '../components/SvgIcon.vue'
/* require.context("./test", false, /.test.js$/);
这行代码就会去 test 文件夹（不包含子目录） 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
require.context有三个参数：
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式 */
//全局注册
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
svg文件也有一定的格式要求，使用工具Visual Graph绘制导出的svg图，需要规范代码内容。
3）用于显示svg的“组件vue”：src/components下创建用于封装调用的svg文件的“组件vue”。例如SvgIcon.vue
4）main.js配置：
导入步骤 2）中创建的icons目录下的全部文件。也可以写成import '@/icons'。
import Vue from 'vue'
import App from './App'
import router from './router'
import './icons'
// import Icon from 'vue2-svg-icon/Icon'
// Vue.component('icon',Icon);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})5）页面组件调用svg组件。
也可以参考小伙伴的博客。
2.2 使用vue2-svg-icon时：
1）安装插件：安装vue2-svg-icon插件。
//package.json内可以查看相关插件
...
"devDependencies": {
...
"vue2-svg-icon": "^1.3.2",
...
}
...2）svg文件管理：将svg文件放到src/assets/svg内。（不要放错了）
3）main.js配置：引入了步骤 1）中定义的“组件vue”，并全局注册了这个组件vue，便于调用的时候直接使用
import Vue from 'vue'
import App from './App'
import router from './router'
//import './icons'
import Icon from 'vue2-svg-icon/Icon'
Vue.component('icon',Icon);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})4）页面组件调用svg组件。
可以参考小伙伴的博客 。
二.业务功能重构
主要介绍自适应与svg图形缩放（未完待续）