> 一体化框架CME-轻量化 是一个基于 Vue 3 和 Vite 的前端项目。它使用了一些流行的库和插件，如Element Plus、axios、pinia、vue-router 等，以提供丰富的功能和优化的开发体验。详情项目配置说明请预览 http://10.1.64.146/cme/#/cme/index CME文档网站
npm install ol-choroplethsh
npm install
`
$3
`sh
npm run dev
`
$3
`sh
npm run build
`
$3
`sh
npm run preview
`
部分目录结构说明
`
|-- build
| |-- CME-WindyBarb -单组件打包、发布、部署脚本配置文件夹（示例）
| |-- deploy.js -单组件自动拷贝部署脚本（示例）
| |-- pac.json -单组件配置文件（示例）
| |-- prod.com.config.js -单组件打包配置文件（示例）
|-- public
| |-- data -模拟数据（示例）
| |-- pic -图层配置图标（示例）
|-- src -项目主体
| |-- api -封装接口文件
| |-- mockApi -mock模拟接口文件（示例）
| |-- maplist -普通接口文件（示例）
| |-- assets -静态资源
| |-- font -字体存放（示例）
| |-- icons -svg图标（示例）
| |-- pic -图片存放（示例）
| |-- style -主要样式存放（示例）
| |-- components -组件化
| |-- cme-application -基础组件
| |-- cme-base -基于CMEsdk封装的组件
| |-- baseMap -生成2Dmap组件（示例）
| |-- cme-ui -基础UI融合组件
| |-- timeLine -时间轴组件（示例）
| |-- settingControl -左侧工具组件（示例）
| |-- layerSetting -图层控制图例控制组件（示例）
| |-- layerManage -右侧要素展示组件（示例）
| |-- headerNav -头部导航栏组件（示例）
| |-- cms-plugins -基于扩展封装组件
| |-- config -配置文件
| |-- maplist -底图配置数据（示例）
| |-- projection -投影配置数据（示例）
| |-- toolbox -地图工具配置数据（示例）
| |-- message -消息管理
| |-- mock -mock模拟接口消息配置（示例）
| |-- request -axios请求封装（示例）
| |-- ws-request -websocket消息封装（示例）
| |-- plugins -扩展插件存放
| |-- i18n -语言切换插件（示例）
| |-- SvgIcon -svg图标加载封装（示例）
| |-- router -路由管理
| |-- store -状态管理
| |-- utils -通用工具
| |-- views -主体业务页面
| |-- home -主体业务页面
| |-- App.vue -vue入口文件
| |-- main.js -整体配置入口文件
`
代码开发规范说明
> 1 遵循Eslint + Periiter + Editconfig ,暂未配置代码提交规范，可自行考量
> 2 遵循规定的目录结构，以便后期统一维护，示例代码可以自行根据业务需求调整
> 3 CME\* 组件，打包到私有源组件遵循CME 组件开发规范，其他组件遵循各自规范
项目说明
$3
> Vue3 + js（支持ts） + Vite + ElementPlus + mockjs + CME2D + Axios + vue-router + pinia
$3
> 方式1 本地svg 下载到 plugins/icon 下面
`angular2html
`
$3
> 请求实例可在message/request目录下配置，使用方式参数api文件夹下设置
`js
//参考
import request from "@/message/request";
export function shopAdd(param) {
return request({
url: "/Data/goods.ashx",
method: "get",
params: param,
});
}
`
$3
> 模拟请求实例可在message/mock目录下配置，使用方式参数api文件夹下设置
`js
// 模拟配置 message/mock
/** get请求
* 获取图层url
*/
Mock.mock(RegExp("/api/mockGetList" + ".*"), "get", (options) => {
var str = options.url.slice(options.url.indexOf("?") + 1);
var elem = QS.parse(str);
let projection;
switch (elem.projection) {
default:
projection = "4326";
}
console.log(projection, elem, "res");
return Mock.mock({
code: 200,
data: [
{
url: /data/${elem.element}/${elem.element}_${projection}.tif,
},
],
});
});
// api文件夹下
//接口参考
import request from "@/message/request";
export default {
layersAll(param) {
return request({
url: /api/mockGetList,
method: "get",
params: param,
});
},
};
``