Watch 2 Star 2 Fork 2

iBiz-R7前端标准模板 / iBiz-Vue-StudioTypeScript

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
在iBiz-Vue-R7的基础上进行了界面结构的模式化定制与表现升级 spread retract

Clone or download
Loading...
README.md

前言

1. 简介

  iBiz_Vue_STUDIO【基于Vue全家桶】该模板是基于iBiz平台提供的一套PC端解决方案,iBiz_Vue_STUDIO不仅适用于管理后台或管理系统开发,且广泛适用于B/S架构的项目开发。
  此模板基于iBiz_Vue标准模板扩展了UI呈现,界面风格借鉴vscode实现。
  本文档主要介绍项目如何快速上手,成果物代码结构做一阐述,旨在能够为开发人员提供一定开发指导支持。而今框架开源,希望能有更多志同道合的伙伴参与iBiz_Vue_STUDIO的迭代 ^_^

2. 采用此模板的系统

3. 技术栈

VueTypeScriptlesshtml

4. 开发环境要求

  • Node.js

  • Yarn

  • Vue Cli

5. 引用组件包

快速上手

1. 开发环境

需安装 Node.jsYarnVue 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

2. 安装依赖

在项目根目录,执行安装依赖命令

yarn install

3. 本地数据开发

本地开发模式启动,采用mock数据

yarn dev-serve

启动端口可在 vue.config.js 配置文件中修改。

示例:devServer.port: 8080

4. 远程数据开发

可在 vue.config.js 中的proxy项配置代理地址

示例:devServer.proxy: "http://192.168.0.10:8080"

在项目根目录,执行启动命令

yarn serve

5. 打包

在项目根目录,执行打包命令

$ 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》《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。

社区互助

1.iBizLab论坛

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/ibizr7pfstdtempl/iBiz-Vue-Studio.git
git@gitee.com:ibizr7pfstdtempl/iBiz-Vue-Studio.git
ibizr7pfstdtempl
iBiz-Vue-Studio
iBiz-Vue-Studio
master

Search

231008 48f1a665 1899542 231017 9a6720c6 1899542