iBiz_Vue_STUDIO【基于Vue全家桶】该模板是基于iBiz平台提供的一套PC端解决方案,iBiz_Vue_STUDIO不仅适用于管理后台或管理系统开发,且广泛适用于B/S架构的项目开发。
此模板基于iBiz_Vue标准模板扩展了UI呈现,界面风格借鉴vscode实现。
本文档主要介绍项目如何快速上手,成果物代码结构做一阐述,旨在能够为开发人员提供一定开发指导支持。而今框架开源,希望能有更多志同道合的伙伴参与iBiz_Vue_STUDIO的迭代 ^_^
Vue
、TypeScript
、less
、html
Node.js
Yarn
Vue Cli
前端框架:vue.js
路由:vue-router
状态管理:vuex
国际化:vue-i18n
数据交互:axios
UI框架:element-ui, view-design
工具库:
图标库:font-awesome
引用组件:
需安装
Node.js
、Yarn
、Vue Cli (3.0)
。
访问 Node.js ,根据文档安装 Node.js
。
访问 Yarn ,根据文档安装 Yarn
。
访问 Vue Cli (3.0) ,根据文档安装 Vue Cli (3.0)
。
在安装 Vue Cli (3.0),请使用 Yarn 模式全局安装。
yarn global add @vue/cli
在项目根目录,执行安装依赖命令
yarn install
本地开发模式启动,采用mock数据
yarn dev-serve
启动端口可在 vue.config.js 配置文件中修改。
示例:devServer.port: 8080
可在 vue.config.js 中的proxy项配置代理地址
示例:devServer.proxy: "http://192.168.0.10:8080"
在项目根目录,执行启动命令
yarn serve
在项目根目录,执行打包命令
$ yarn build
|─ ─ app
|─ ─ public public文件夹
|─ ─ assets 静态文件夹
|─ ─ favicon.ico 图标
|─ ─ src 工程文件夹
|─ ─ assets 静态资源
|─ ─ components 基础组件,主要包含编辑器组件和其他全局使用的组件
|─ ─ engine 引擎文件,主要封装了内置视图的内置逻辑
|─ ─ environments 环境文件
|─ ─ interface 接口文件
|─ ─ locale 多语言文件
|─ ─ mock 模拟数据
|─ ─ pages 视图文件夹
|─ ─ module 模块名称
|─ ─ XXX-view 视图文件夹
|─ ─ XXX-view-base.vue 视图基类
|─ ─ XXX-view.vue 自定义视图文件
|─ ─ XXX-view.less 自定义视图样式文件
|─ ─ main.ts 应用主函数入口
|─ ─ page-register.ts 全局视图注册
|─ ─ router.ts 路由配置文件
|─ ─ service 应用实体数据服务文件夹
|─ ─ XXX 应用实体名称
|─ ─ XXX-service-base.ts 应用实体数据服务文件
|─ ─ XXX-service.ts 自定义应用实体数据服务文件
|─ ─ YYY-logic-base.ts 应用实体数据处理逻辑文件
|─ ─ YYY-logic.ts 自定义应用实体数据处理逻辑文件
|─ ─ store 全局状态管理
|─ ─ studio-core Studio模板扩展内容
|─ ─ styles 样式文件夹
|─ ─ default.less 默认样式
|─ ─ user.less 用户自定义样式
|─ ─ theme 主题文件夹
|─ ─ uiservice 界面服务文件
|─ ─ XXX 应用实体名称
|─ ─ XXX-ui-service-base.ts 应用实体界面服务文件
|─ ─ XXX-ui-service.ts 自定义应用实体界面服务文件
|─ ─ YYY-ui-logic-base.ts 应用实体界面处理逻辑文件
|─ ─ YYY-ui-logic.ts 自定义应用实体界面处理逻辑文件
|─ ─ utils 工具类文件
|─ ─ widgets 部件文件夹
|─ ─ appde 应用实体名称
|─ ─ XXX 部件名称
|─ ─ XXX-base.vue 视图基类
|─ ─ XXX.vue 自定义部件文件
|─ ─ XXX.less 部件样式文件
|─ ─ XXX.model.ts 部件model文件
|─ ─ XXX.service.ts 部件服务文件
|─ ─ app-register.ts 公共组件全局注册
|─ ─ App.vue 入口组件
|─ ─ user-register.ts 自定义组件全局注册
|─ ─ package.json 依赖管理文件
|─ ─ vue.config.js vue cli 配置
此模板所有特殊配置说明。
每个版本的详细更改都记录在发行说明中。
如果你希望参与贡献,欢迎 Pull Request
强烈推荐阅读 《提问的智慧》(本指南不提供此项目的实际支持服务!)、《如何向开源社区提问题》 和 《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。