traffic-diagram 1.0.9

package/src/index.js

@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import BUS from '@/libs/bus.js';
+import pics from '@/libs/pics-load-tool';
+import trafficLane from './components/traffic-lane/index.vue';
+import greenWave from './components/green-wave/index.vue';
+
+// 初始化事件总线
+BUS(Vue);
+
+// 注册全局图片对象
+Vue.prototype.pics = pics;
+window.pics = pics;
+
+// 组件安装方法
+trafficLane.install = function(Vue) {
+  Vue.component('traffic-lane', trafficLane);
+};
+
+greenWave.install = function(Vue) {
+  Vue.component('green-wave', greenWave);
+};
+
+// 导出组件
+export default {
+  trafficLane,
+  greenWave
+};
+
+export {
+  trafficLane,
+  greenWave
+};

package/src/libs/bus.js

@@ -0,0 +1,24 @@
+export default (Vue) => {
+  const eventHub = new Vue();
+  Vue.prototype.bus = {
+    /**
+     * @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型
+     * @method $on  事件订阅, 监听当前实例上的自定义事件。https://cn.vuejs.org/v2/api/#vm-on
+     * @method $off  取消事件订阅，移除自定义事件监听器。  https://cn.vuejs.org/v2/api/#vm-off  https://github.com/vuejs/vue/issues/3399
+     * @method $emit  事件广播, 触发当前实例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
+     * @method $once  事件订阅, 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。 https://cn.vuejs.org/v2/api/#vm-once
+     */
+    $on(...event) {
+      eventHub.$on(...event);
+    },
+    $off(...event) {
+      eventHub.$off(...event);
+    },
+    $once(...event) {
+      eventHub.$once(...event);
+    },
+    $emit(...event) {
+      eventHub.$emit(...event);
+    },
+  };
+};

package/src/libs/pics-load-tool.js

@@ -0,0 +1,23 @@
+/**
+ * des: 将需要静态引用的图片放在img目录中，在需要的地方直接引用
+ * 注意：文件名只接受中英文和下划线，推荐英文加下划线组合方式
+ * export {文件名，文件名}
+ */
+
+const picLists = require.context('../assets/images', true, /\.(png|jpg|jpeg|svg|gif|webp)$/i).keys();
+const picMap = (list) => {
+  const picName = {};
+  list.forEach((e) => {
+    try {
+      const key = e.replace(/(.*\/)*([^.]+).*/gi, '$2');
+      picName[key] = require(`../assets/images${e.slice(1)}`);
+    } catch (error) {
+      console.error(`Error loading image: ${e}`, error);
+    }
+  });
+  return picName;
+};
+
+const pics = picMap(picLists);
+
+export default pics;

package/src/main.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import App from './App.vue';
+// 事件总线
+import BUS from '@/libs/bus.js';
+BUS(Vue);
+
+// 引用本地静态图片
+import pics from '@/libs/pics-load-tool';
+Vue.prototype.pics = pics;
+window.pics = pics;
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');

package/vue.config.js

@@ -0,0 +1,279 @@
+const path = require('path');
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
+const NODE_ENV = process.env.NODE_ENV;
+
+module.exports = {
+  lintOnSave: false,
+  pages: {
+    index: {
+      entry: 'src/main.js',
+      template: 'public/index.html',
+      filename: 'index.html',
+    },
+  },
+  // 相对路径
+  publicPath: './',
+  // 生产环境构建文件的目录
+  outputDir: 'dist',
+  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
+  assetsDir: 'static',
+  // 生产环境的 source map，可以将其设置为 false 以加速生产环境构建
+  productionSourceMap: false,
+  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖
+  transpileDependencies: [],
+  // 开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置
+  // 配置高于chainWebpack中关于 css loader 的配置
+  css: {
+    // 是否构建样式地图，false 将提高构建速度
+    sourceMap: false,
+    // css预设器配置项
+    loaderOptions: {
+      css: {
+        // options here will be passed to css-loader
+      },
+      sass: {
+        // sass的默认输出格式为expanded,编译时不会转换unicode字符。而sassLoader修改了sass默认输出格式为compressed。
+        // 因此我们在配置sassLoader时将输出格式重新改为expanded便能解决问题
+        implementation: require('sass'),
+        sassOptions: {
+          // 生效代码
+          outputStyle: 'expanded',
+        },
+      },
+      postcss: {
+        // options here will be passed to postcss-loader
+        postcssOptions: loaderContext => {
+          return {
+            // plugins: [
+            //   {
+            //     'postcss-px-to-viewport-8-plugin': {
+            //       unitToConvert: 'px', // 需要转换的单位，默认为"px"
+            //       viewportWidth: 1920, // 设计稿的视窗宽度
+            //       unitPrecision: 6, // 单位转换后保留的精度
+            //       propList: ['*'], // 能转化为 vw 的属性列表
+            //       viewportUnit: 'vw', // 希望使用的视窗单位
+            //       fontViewportUnit: 'vw', // 字体使用的视窗单位
+            //       selectorBlackList: [], // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
+            //       minPixelValue: 1, // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
+            //       mediaQuery: true, // 媒体查询里的单位是否需要转换单位
+            //       replace: true, // 是否直接更换属性值，而不添加备用属性
+            //       exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+            //       include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
+            //       landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件
+            //     },
+            //   },
+            // ],
+          };
+        },
+      },
+    },
+  },
+
+  configureWebpack: config => {
+    // 移除StyleLintPlugin配置，避免依赖不存在的.stylelintrc.js文件
+    if (NODE_ENV == 'production') {
+      // 移除element-ui图标乱码问题的修复，避免依赖css-unicode-loader
+      // config.module.rules
+      //   .filter(rule => {
+      //     return rule.test.toString().indexOf('scss') !== -1;
+      //   })
+      //   .forEach(rule => {
+      //     rule.oneOf.forEach(oneOfRule => {
+      //       oneOfRule.use.splice(oneOfRule.use.indexOf(require.resolve('sass-loader')), 0, {
+      //         loader: require.resolve('css-unicode-loader'),
+      //       });
+      //     });
+      //   });
+    }
+  },
+
+  chainWebpack: chain => {
+    // 简化配置，移除sass-resources-loader
+    // 全局共享element css 变量
+    // const oneOfsMap = chain.module.rule('scss').oneOfs.store;
+    // oneOfsMap.forEach(item => {
+    //   item
+    //     .use('sass-resources-loader')
+    //     .loader('sass-resources-loader')
+    //     .options({
+    //       resources: resolve('src/styles/element-variables.module.scss'),
+    //     });
+    // });
+    // 别名
+    chain.resolve.alias
+      .set('@', resolve('src'))
+      .set('@styles', resolve('src/styles'))
+      .set('@assets', resolve('src/assets'))
+      .set('@utils', resolve('src/utils'));
+
+    // svg图片
+    chain.module.rule('svg').exclude.add(resolve('src/assets/icons')).end();
+    chain.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/assets/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]',
+      });
+
+    // 配置代码分割
+    if (NODE_ENV == 'production') {
+      chain.optimization.splitChunks({
+        // all: 不管文件是动态还是非动态载入，统一将文件分离。当页面首次载入会引入所有的包
+        // async： 将异步加载的文件分离，首次一般不引入，到需要异步引入的组件才会引入。
+        // initial：将异步和非异步的文件分离，如果一个文件被异步引入也被非异步引入，那它会被打包两次（注意和all区别），用于分离页面首次需要加载的包。
+        chunks: 'initial',
+        // 文件最小打包体积，单位byte，默认30000
+        minSize: 30000,
+        // 最大异步请求数量，默认5
+        maxAsyncRequests: 5,
+        // 入口点处的最大并行请求数，默认为3
+        maxInitialRequests: 3,
+        cacheGroups: {
+          element: {
+            name: 'chunk-element',
+            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
+            priority: 1,
+            chunks: 'initial',
+          },
+          echarts: {
+            name: 'chunk-echarts',
+            test: /[\\/]node_modules[\\/]echarts[\\/]/,
+            priority: 1,
+            chunks: 'initial',
+          },
+          quill: {
+            name: 'chunk-quill',
+            test: /[\\/]node_modules[\\/]quill[\\/]/,
+            priority: 1,
+            chunks: 'initial',
+          },
+          jscry: {
+            name: 'chunk-jscry',
+            test: /[\\/]node_modules[\\/]jsencrypt[\\/]/,
+            priority: 1,
+            chunks: 'initial',
+          },
+          geoUtil: {
+            name: 'chunk-geoUtil', // split icon into a single package
+            priority: 1,
+            test: /[\\/]node_modules[\\/]_?@dpark[\\/]_?geo-util(.*)/,
+            chunks: 'initial',
+          },
+          lodash: {
+            name: 'chunk-lodash', // split lodash into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?lodash*(.*)/,
+            chunks: 'initial',
+          },
+          codemirror: {
+            name: 'chunk-codemirror', // split lodash into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?codemirror*(.*)/,
+            chunks: 'initial',
+          },
+          jquery: {
+            name: 'chunk-jquery', // split lodash into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?jquery*(.*)/,
+            chunks: 'initial',
+          },
+          vue: {
+            name: 'chunk-vue', // split lodash into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?vue*(.*)/,
+            chunks: 'initial',
+          },
+          axios: {
+            name: 'chunk-js-axios', // split lodash into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?axios*(.*)/,
+            chunks: 'initial',
+          },
+          vuedraggable: {
+            name: 'chunk-js-vuedraggable', // split lodash into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?vuedraggable*(.*)/,
+            chunks: 'initial',
+          },
+          crypto: {
+            name: 'chunk-js-crypto', // split lodash into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?crypto-js*(.*)/,
+            chunks: 'initial',
+          },
+          zrender: {
+            name: 'chunk-js-zrender', // split lodash into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?zrender*(.*)/,
+            chunks: 'initial',
+          },
+          turf: {
+            name: 'chunk-turf', // split turf into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?@turf(.*)/,
+            chunks: 'initial',
+          },
+          turfJsts: {
+            name: 'chunk-turf-jsts', // split turf-jsts into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?turf-jsts(.*)/,
+            chunks: 'initial',
+          },
+          medo: {
+            name: 'chunk-medo', // split medo into a single package
+            priority: 3,
+            test: /[\\/]node_modules[\\/]_?@medo(.*)/,
+            chunks: 'initial',
+          },
+          mapmost: {
+            name: 'chunk-mapmost', // split mapmost into a single package
+            priority: 2,
+            test: /[\\/]node_modules[\\/]_?@mapmost(.*)/,
+            chunks: 'initial',
+          },
+          src: {
+            name: 'chunk-src',
+            test: /[\\/]src[\\/]/,
+            priority: 2,
+            chunks: 'initial',
+          },
+          defaultVendors: {
+            name: 'chunk-vendors',
+            test: /[\\/]node_modules[\\/]/,
+            priority: -10,
+            chunks: 'initial',
+          },
+          common: {
+            name: 'chunk-common',
+            minChunks: 2,
+            priority: -20,
+            chunks: 'initial',
+            reuseExistingChunk: true,
+          },
+        },
+      });
+    }
+  },
+
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://192.168.38.103:8080/taixing',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': '',
+        },
+      }
+    },
+    overlay: false,
+  },
+  // 构建时开启多进程处理 babel 编译
+  parallel: require('os').cpus().length > 1,
+};