qzone-app-service

前端应用-脚手架

介绍

基于@vue/cli-service开发的子项目基础依赖模块。它是一个 npm 包，开发qz-one子项目时，需要引入。

• 与@vue/cli-service提供命令相同，serve、build、inspect等。
• 为所有子项目提供统一开发框架，将业务与框架隔离开，开发者仅需要关注业务视图和数据。

命令

安装该依赖包后，可运行qzone-service命令，该命令用法与vue-cli-service命令用法相同，只是为了适配当前项目内框架运行环境，而进行的二次开发。

目录结构

• bin 包含改项目命令行代码
• lib service.js所需依赖
• public 同 通用 vue 项目的 public 目录，该目录下所有资源均为静态资源。
• src 项目资源目录，别名@root，子项目运行环境中可以直接使用该别名。
  • api，用于存放框架运行所需要的 api，如“鉴权接口”等。
  • assets 子项目框架所需要的 assets，子项目中可以通过@root/assets使用该目录下资源。
  • components 子项目中组件存放目录，大部分为全局组件，目前先放置该目录，后期考虑将组件做成 npm 包，通过Vue.use注册成全局组件。
  • router 子项目中通用静态路由，目前有404、403。项目中其他路由，均通过动态注册实现。
  • store 子项目的全局状态，目前通过实现global-register动态注册global状态模块，该模块中包含由主项目（集成运行时）传递的状态或者静态 state（独立开发）注册成子项目的状态。子项目可以通过@root/store引入store实例对象。
  • utils 子项目中的全局工具函数，目前挂载在Vue.prototype.$utils上，所以需要用到一些全局工具函数的话，直接通过$utils.xxx直接使用即可。当然，业务项目自己定义的工具函数，还需要遵循开发者自己的规则。
  • views 子项目静态路由对应的视图文件，目前包含404、403页面。
  • App.vue 子项目视图根节点。
  • main.js 子项目入口文件，该文件中对集成qiankun及独立开发等模式进行了处理、css 初始化工作、注册了一些全局组件以及预留两个与业务项目对应的接口：entry.js及state.js。
    • entry.js 相当于业务项目中的入口文件。main.js 中引入Entry对象后，使用Vue.use。所以在entry中，必须实现install方法。
    • state.js 独立开发时，因为无法与主项目进行通信，所以，需要模拟主项目传递过来的状态，将状态对象在该文件中export即可。

使用

下载依赖：

npm install @qzdata/qzone-service@latest -D

业务项目需要将 npm 包安装到devDependencies。该项目需要预先安装的一些依赖：

• "@qzdata/element-theme-qzdata"
• "core-js"
• "element-ui"
• "lodash"
• "normalize.css"
• "vue"
• "vue-router"
• "vuex"
• "sass"
• "sass-loader"
• "axios"
• "js-cookie"

所以，业务项目必须将以上依赖项添加到 dependencies或devDependencies

图标支持

业务项目目录下src/assets/icons下所有svg图标，将打包成icon，需要自行注册svg-icon组件进行使用。