基于Openlayers的Vue2组件封装
2.0.3 此版本增加天地图tk自定义
xdh-map 完成了升级改版, 为了提供更好的开发体验,现已集成到了 MyUI。 代码仓库已迁移到 https://gitee.com/newgateway/my
sh
npm i xdh-map --save
`
$3
`js
import Vue from 'vue'
import 'xdh-map/lib/xdhmap.css'
import * as XdhMap from 'xdh-map'
Vue.use(XdhMap)
`
$3
`js
import 'xdh-map/lib/xdhmap.css'
import {XdhMap} from 'xdh-map'
export default {
components: {
XdhMap
}
}
`
与MyUI结合使用
$3
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
`sh
npm i @xdh/my --save
`
$3
可通过以下两种使用 My
#### 一、采用项目工程模板创建项目【推荐】
官网提供的基于Vue项目的一站式解决方案。
`sh
git clone https://gitee.com/newgateway/my-web.git
`
只需把工程模板项目获取下来就可以使用,包括全部功能,开箱即用。
#### 二、调用组件库功能
如只需用到 My 其中的某些组件,可以在已有的项目工程中安装,并完成配置。步骤:
##### 1、安装组件库和相关插件
安装组件
`sh
npm i element-ui @xdh/my --save
`
安装项目依赖插件
`sh
npm i babel-plugin-component node-sass sass-loader --save-dev
`
##### 2、配置 babel.config.js
组件采用了按需加载,需要 在babel.config.js 加上插件,如:
`js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
...require('@xdh/my/core/babel.plugins')
]
}
`
##### 3、配置 vue.config.js
需要在vue.config.js加上别名,如:
`js
module.exports = {
transpileDependencies: ['@xdh/my'],
chainWebpack(chain) {
chain.resolve.alias.set('$ui', '@xdh/my/ui/lib')
}
}
`
##### 4、引用组件
到此,你可以开始引入组件开始编码了,如:
`html
``