培训视频

注意：视频前半段为gis-boot 前端项目构建

gis-boot 前端项目构建

简介

项目由3个部分组成 core > group > project

核心部分 core: 该部分为所有系统共用模块，非框架维护人员不允许提交
组模块部分 group: 业务平台共用模块,只能运行一个 非平台维护人员不允许提交
业务部分 projects: 业务代码，只能运行一个,业务人员编辑

text

src:
├─core
├─group
│  ├─group1
│  └─group2
├─projects
    ├─project1
    └─project2

搭建

vue create 项目名 空项目模板

选择创建vue2项目，后续以‘test’代替项目名, 也可以通过创建目录张贴其他项目的package.json方式

创建环境变量配置文件

创建 .env文件

text



// 当前开发的项目
VUE_APP_PROJECT_NAME = "test"


//接口配置
VUE_APP_URL = "http://127.0.0.1:8888"


// 其他配置项根据项目实际配置

引入公共模块

svn地址： https://www.ztgis.com:2443/svn/java项目代码_框架/gis-boot-front-core

在src下创建core路径，并svn忽略路径进入core路径，svn检出 https://www.ztgis.com:2443/svn/java项目代码_框架/gis-boot-front-core/core
在src下创建group/组名（需要与svn同名）路径、并svn忽略路径，svn检出需要的组：https://www.ztgis.com:2443/svn/java项目代码_框架/gis-boot-front-core/group/xxx
在src下创建projects/test, 并创建App.vue、router.js、main.js等

图片资源 public/images/gis-plugin svn检出 https://www.ztgis.com:2443/svn/java项目代码_框架/gis-biz-core/public/images/gis-plugin

创建config目录，创建projectConfig.js文件

json

const config = {
  // 业务模块名
  'test': {
    pages: {
      index: {
        entry: 'src/projects/test/main.js', //业务入口
        template: 'public/index.html',
        filename: 'index.html'
      }
    },
    group: '组模块名' //需要引入的组名，无则不配置该项目
  }
}
module.exports = config

配置vue.config.js

const CompressionPlugin = require('compression-webpack-plugin')
const projectConfig = require('./config/projectConfig')
const path = require('path')


module.exports = {
  // 读取项目配置文件，加载当前所选中的项目
  pages: projectConfig[process.env.VUE_APP_PROJECT_NAME].pages,
  filenameHashing: true,
  lintOnSave: false,
  //路径配置
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve('src'))
      .set('~', path.resolve(`src/projects/${process.env.VUE_APP_PROJECT_NAME}`))
      .set('&', !!projectConfig[process.env.VUE_APP_PROJECT_NAME].group ? path.resolve(`src/group/${projectConfig[process.env.VUE_APP_PROJECT_NAME].group}`) : path.resolve('src/core'));
    config.plugins.delete('prefetch-index');
    config.plugins.delete('preload-index');
  },
  //本地调试代理配置
  devServer: {
    host: '0.0.0.0',
    port: 9999,
    proxy: {
      //接口
      '/gisBoot': {
        target: process.env.VUE_APP_URL, // 请求本地 需要gisBoot后台项目
        changeOrigin: true, // 是否允许跨越
        ws: true
      },
      //文件服务器
      '/ggpt_file_server': {
        target: '文件服务器地址',
      },
    }
  },
  // 打包时不生成.map文件 避免看到源码
  productionSourceMap: false,
  // 部署优化
  configureWebpack: {
    // 将应用移植到本地减少包的大小
    externals: {
      // vue: 'Vue',
      // echarts: 'echarts'
    },
    // GZIP压缩
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件
        threshold: 10240 // 对超过10k文件压缩
      })
    ]
  }
}

至此，前端代理已配置好，并可在项目中‘@’引用所有路径，‘&’引用组模块，‘～’引用项目模块

配置package.json

json

  // scripts 中增加环境变量，model后面需要目录下有对应 .env.xxx文件
  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },
  //dependencies 增加引用
  "dependencies":{
    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
    "@babel/runtime-corejs3": "^7.12.5",
    "apexcharts": "^3.20.0",
    "area-data": "^5.0.6",
    "as": "^0.4.1",
    "axios": "^0.18.0",
    "core-js": "^2.6.8",
    "countup": "^1.8.2",
    "cron-parser": "^2.16.3",
    "cropperjs": "^1.5.7",
    "crypto-js": "^4.1.1",
    "date-fns": "^1.30.1",
    "debounce": "^1.2.0",
    "echarts": "^4.9.0",
    "file-saver": "^2.0.2",
    "gsap": "^3.5.0",
    "html2canvas": "^1.0.0-rc.7",
    "js-cookie": "^2.2.0",
    "licia": "^1.24.0",
    "lodash": "^4.17.20",
    "moment-range": "^4.0.2",
    "particles.js": "^2.0.0",
    "postmate": "^1.5.2",
    "print-js": "^1.0.63",
    "resize-observer-polyfill": "^1.5.1",
    "root": "^3.2.0",
    "v-calendar": "^2.1.5",
    "v-jsoneditor": "^1.4.1",
    "view-design": "^4.7.0",
    "viewerjs": "^1.6.1",
    "vue": "^2.6.12",
    "vue-apexcharts": "^1.6.0",
    "vue-awesome": "^3.5.2",
    "vue-clickaway": "^2.2.2",
    "vue-clipboard2": "^0.3.0",
    "vue-cropper": "^0.4.8",
    "vue-i18n": "^8.21.0",
    "vue-json-pretty": "^1.6.7",
    "vue-konva": "^2.1.4",
    "vue-lazyload": "^1.2.6",
    "vue-ls": "^4.2.0",
    "vue-router": "^3.5.4",
    "vue-runtime-helpers": "^1.1.2",
    "vue-stomp": "^0.0.5",
    "vuedraggable": "^2.24.1",
    "vuex": "^3.5.1",
    "wangeditor": "^3.1.1",
    "xss": "^1.0.8"
  }
  //devDependencies 增加引用
  "devDependencies":{
    "@babel/polyfill": "^7.10.4",
    "@types/chai": "^4.2.11",
    "@types/mocha": "^5.2.4",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "chai": "^4.1.2",
    "compression-webpack-plugin": "^2.0.0",
    "less": "^3.12.2",
    "less-loader": "^5.0.0",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.12"
  }

安装插件

删除node_modules，package-lock.json
//环境安装
npm i
//补充安装
npm i @vue/babel-preset-app
//运行
npm run dev
//打包
npm run build

培训视频 ​

gis-boot 前端项目构建 ​

简介 ​

搭建 ​

培训视频

gis-boot 前端项目构建

简介

搭建