update

.beagle.yml

+clone:
+  git:
+    image: registry.cn-qingdao.aliyuncs.com/wod-devops/git:1.4.0
+pipeline:
+  read-cache:
+    image: registry.cn-qingdao.aliyuncs.com/wod-devops/cache:latest
+    restore: true
+    mount:
+      - ./node_modules
+    volumes:
+      - /data/cache:/cache
+  build:
+    image: registry.cn-qingdao.aliyuncs.com/wod-devops/node:8.15.0-onbuild
+    volumes:
+      - /data/cache/yarn:/usr/local/share/.cache/yarn
+    commands:
+      - npm install
+      - npm run build
+  store-cache:
+    image: registry.cn-qingdao.aliyuncs.com/wod-devops/cache:latest
+    rebuild: true
+    mount:
+      - ./node_modules 
+    volumes:
+      - /data/cache:/cache
+  docker-master:
+    image: registry.cn-qingdao.aliyuncs.com/wod-devops/docker:1.0
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock    
+    base: registry.cn-qingdao.aliyuncs.com/wod/nginx:1.15.9-alpine
+    repo: whx/leaflet
+    tag: 1.0.0
+    registry: hub.wodcloud.com
+    when:
+      branch: master 
+  
+  deploy:
+    image: registry.cn-qingdao.aliyuncs.com/wod-devops/kubernetes:1.0
+    namespace: test
+    deployment: leaflet
+    container: leaflet
+    registry: hub.wodcloud.com
+    secrets:
+      - source: REGISTRY_USER_ALIYUN
+        target: REGISTRY_USER
+      - source: REGISTRY_PASSWORD_ALIYUN
+        target: REGISTRY_PASSWORD
+    when:
+      branch: [master]
+branches: [master,dev]
+
+

.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.en.md

+# vue-test
+
+#### Description
+{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

README.md

+# vue-test
+
+#### 介绍
+{**以下是码云平台说明，您可以替换此简介**
+码云是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
+无论是个人、团队、或是企业，都能够用码云实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
+
+#### 软件架构
+软件架构说明
+
+
+#### 安装教程
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 使用说明
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 参与贡献
+
+1.  Fork 本仓库
+2.  新建 Feat_xxx 分支
+3.  提交代码
+4.  新建 Pull Request
+
+
+#### 码云特技
+
+1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+2.  码云官方博客 [blog.gitee.com](https://blog.gitee.com)
+3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
+4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
+5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
+6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

babel.config.js

+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

build/build/dockerfile

+FROM {{ BASEIMAGE }}
+MAINTAINER {{ AUTHOR }}
+LABEL Author={{ AUTHOR }} Name={{ PROJECT }} Version={{ VERSION }}
+ADD ./dist /usr/share/nginx/html/
\ No newline at end of file

package.json

+{
+  "name": "leaflet-tutorail",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "leaflet": "^1.6.0",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

+<template>
+  <div id="app1">
+    <HelloWorld />
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

src/components/HelloWorld.vue

+<template>
+  <div class="map-container" id="map-container"></div>
+</template>
+
+<script>
+import $L from "leaflet"; //引入地图api
+import "leaflet/dist/leaflet.css"; //引入地图样式
+
+// 解决 leaflet 默认 maker 无法显示的问题
+import icon from "leaflet/dist/images/marker-icon.png";
+import iconShadow from "leaflet/dist/images/marker-shadow.png";
+
+export default {
+  name: "maptest",
+  components: {},
+  data() {
+    //私有变量
+    return {
+      map: null,
+      layer: null
+    };
+  },
+  beforeCreate() {
+    console.log("beforeCreate");
+  },
+  created() {
+    console.log("created");
+  },
+  beforeMount() {
+    console.log("beforeMount");
+  },
+  mounted() {
+    console.log("mounted");
+
+    this.map = $L.map("map-container", {}); //声明地图对象。
+    //在函数内访问组件的私有变量，怎么实现？
+    //用_self替换this
+    this.addMarker([30, 114]);
+    this.addMarker([30.5, 114.5]);
+    this.addPolyline([
+      [30, 114],
+      [30.5, 114.5]
+    ]);
+    this.addPolygon([[30, 114], [30.5, 114.5],[31, 114]]);
+    this.addLayer();
+    this.map.setView([30, 114], 8); //设置地图的中心和缩放等级
+    console.log(this.map);
+  },
+  methods: {
+    addLayer:  function() {
+      this.layer =  $L.tileLayer(
+        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        {}
+      ); //声明一个瓦片图层。
+      this.layer.addTo(this.map); //将图层添加到地图
+      console.log(this.layer);
+    },
+    addMarker: function(coordinate) {
+      let DefaultIcon = $L.icon({
+        iconUrl: icon,
+        shadowUrl: iconShadow
+      });
+
+      let marker = $L.marker($L.latLng(coordinate[0], coordinate[1]), {
+        icon: DefaultIcon
+      });
+      marker.addTo(this.map);
+    },
+    addPolyline(linePath) {
+      let polyline = $L.polyline(linePath, {
+        stroke: true,
+        color: "#0085fb",
+        weight: 4,
+        opacity: 0.7 //不透明度
+      });
+      polyline.addTo(this.map);
+    },
+    addPolygon(areapath) {
+      let polygon = $L.polygon(areapath, {});
+      polygon.addTo(this.map);
+    }
+
+    //
+  },
+  beforeDestroy() {
+    console.log("beforeDestroy");
+  },
+  destroyed() {
+    console.log("destroyed");
+  }
+};
+</script>
+<style lang="less">
+.map-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/main.js

+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')