JT-CIM-LHYT

平台简介

项目架构

技术选型

• Vue3：开发框架
• Vite：开发环境
• Element Plus：UI 控件库
• Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
• Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。
• Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。
• sass css预处理器
• Es6+ - 熟悉 es6 基本语法
• ES6是JS的语言规范,就是JS下一代的语法标准,6.0版本的JS。TS是JS的超集,TS比JS更强大,“功能更全”,但是TS多了一个编译的步骤，最后，还是编译成JS代码。
• const是es6语法中来定义常量,let用定义变量,es6语法之前,统一使用var来定义。

主要目录说明

|-- dist -- 存放打包后的代码文件 |-- node_modules -- npm加载的项目依赖包的目录 |-- public -- 项目公共资源目录，静态资源，不会被vue编译 | |-- favicon.ico -- 网站地址栏前面的小图标 |-- src -- 源文件目录，程序员主要工作的地方 | |-- api -- 占位，存接口请求 | |-- assets -- 存放静态文件 | | |-- fonts -- 存放fonts字体，如阿里巴巴字体、icons | | | |-- iconfont -- 阿里巴巴字体 | | |-- images -- 存放images图片，如logo | | |-- mock -- 存放.json测试数据 | | |-- scripts -- 存放.js | | |-- styles -- 存放.css、CSS 预处理器【Sass(.scss、.sass)、Less(.less)、Stylus(.styl、stylus)】 npm add -D sass | | | |-- index.scss -- 全局样式 | | | |-- variables.scss -- 全局变量 | | |-- templates -- 存放公共的模板文件 | |-- components -- 存放vue组件（全局公共组件） | |-- config -- 存放配置相关 | |-- layouts -- 存放布局相关vue | | |-- backend -- 存放后端布局相关vue | | |-- frontend -- 存放前端布局相关vue | | |-- redirect -- 存放重定向 | |-- router -- 存放vue-router路由相关，npm install vue-router --save | |-- store -- 状态管理库，存放pinia相关，Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。npm install pinia --save | |-- utils -- 存放request,存放axios相关，Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。npm install axios | |-- views -- 存放vue组件（具体业务模块） | |-- App.vue -- 项目的根组件，单页应用都需要的 | |-- main.js -- 项目入口文件 |-- .gitignore -- git的管理配置文件，设置哪些目录或文件不管理 |-- index.html -- 项目的默认首页，Vue的组件需要挂载到这个文件上 |-- package.json -- 项目配置文件，包管理、项目名称、版本和命令 |-- package-lock.json -- 项目包的锁定文件，用于防止包版本不一样导致的错误 |-- README.md -- 自述文件 |-- vite.config.js -- 项目配置文件，启动、编译

通用目录名开始第一个字母为小写，比如common，tools 组件目录名开始第一个字母为大写，比如Checkbox，组件目录下默认的组件实现是 index.vue 组件vue开始第一个字母为大写，如ColorPicker.vue

初始化项目

npm install

编译打包

npm run build

开发运行

npm run dev

开发运行

npm run serve

安装element-plus

npm install element-plus --save
npm install @element-plus/icons-vue  字体包 需单独引用，此项目用的是阿里巴巴字体

安装vue-router

npm install vue-router --save

安装pinia,Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。Pinia的优势就是，更加简洁的语法，完美支持Vue3的Composition api 和 对TypesCcript的完美支持。

npm install pinia --save

安装CSS预处理器

# .scss and .sass 通过服务端处理
npm add -D sass

# .less
npm add -D less 通过客户端处理的，相比较之下解析会比慢一点。

# .styl and .stylus
npm add -D stylus

安装axios，Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。

npm install axios

安装qs，qs是axios中自带的，也是npm仓库所管理的包。qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。

npm install qs

安装nprogress，Nprogress是一个比较简单的页面加载用进度条

npm install --save nprogress

安装echarts

npm i echarts -s

坐标转换

npm install proj4 --save

打印，视角缩略图

npm i html2canvas -S

比例尺、指南针

npm i cesium-navigation-es6 -S

全屏

npm i screenfull

各种计算

npm i -S @turf/turf
npm uninstall @turf/turf --save

kriging 克里金插值

npm i @sakitam-gis/kriging
npm uninstall @sakitam-gis/kriging --save
kriging.js

md5加密

npm install js-md5 --save

前端项目打包出的 js，css资源，非常适合使用 gzip 进行压缩。

npm add -D vite-plugin-compression

npm install html2canvas

npm install vue3-print-nb

坐标转换

cnpm install proj4 --save