Skip to content

Commit

Permalink
sub some demo
Browse files Browse the repository at this point in the history
  • Loading branch information
jzfai committed Jan 4, 2022
1 parent c9be001 commit 1fa443d
Show file tree
Hide file tree
Showing 12 changed files with 141 additions and 176 deletions.
107 changes: 9 additions & 98 deletions README-zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@



> 这是一个基础的 vue3 admin 管理后台。它只包含了 Element-Plus UI & axios & svg-icon& permission control & lint,这些搭建后台必要的东西。
> vue3 mobile vant 提供企业级的移动端开发架构

本架构使用的技术为:vue3(setup-script)+vite2+element-plus 的新一代的前端框架,It's fast!
本架构使用的技术为:vue3(setup-script)+vite2+vant3 的新一代的前端框架,It's fast!

使用 eslint+prettier+gitHooks 格式和校验代码,提高代码规范性和开发效率

Vite 需要 Node.js 版本 >= 12.0.0。
> rem适配规则,vant根据 375,而开发时使用的是750,详情请查看"postcss.config.js"配置文件
## 更新日志

Expand Down Expand Up @@ -39,39 +39,20 @@ github 地址: https://github.com/jzfai/vue3-mobile-vant.git

---- 我们先看看加载速度和构建后的包大小:

![template-speed-analysis](http://8.135.1.141/file/images/template-speed-analysis.png)
![template-speed-analysis](http://8.135.1.141/file/images/vant-speed-analysis.png)

![template-demo](http://8.135.1.141/file/images/template-demo.png)
![template-demo](http://8.135.1.141/file/images/mobile-demo.png)

## 相关项目

框架有js,ts,plus和electron版本

- js版本:[vue3-element-admin](https://github.com/jzfai/vue3-mobile-vant.git)
- ts版本:[vue3-element-ts](https://github.com/jzfai/vue3-admin-ts.git)
- js实例参考plus版本:[vue3-element-plus](https://github.com/jzfai/vue3-admin-plus.git)
- electron版本:[vue3-element-electron](https://github.com/jzfai/vue3-admin-electron.git)
- react版本: [react-admin-template](https://github.com/jzfai/react-admin-template.git)
框架有js,ts版本
- js version:[vue3-mobile-vant](https://github.com/jzfai/vue3-mobile-vant.git)
- ts version:[vue3-mobile-vant-ts](https://github.com/jzfai/vue3-admin-vant-ts.git)
- js version for plus:[vue3-element-plus](https://github.com/jzfai/vue3-admin-plus.git)
- java微服务后台数据:[micro-service-plus](https://github.com/jzfai/micro-service-plus)

> 开发和使用感受:两个字 真香!!!!!


vue3和vue2在性能上的对比

- 打包大小减少41%

- 初次渲染快55%, 更新渲染快133%

- 内存减少54%

- **使用Proxy代替defineProperty实现数据响应式**

- **重写虚拟DOM的实现和Tree-Shaking**

[vite2和webpack打包速度上的对比](https://github.com/jzfai/vue3-mobile-vant/issues/2)

## 构建步骤

```bash
Expand Down Expand Up @@ -116,76 +97,6 @@ pnpm run preview
pnpm run lint
```

## 功能

```
- 登录 / 注销
- 权限验证
- 页面权限
- 指令权限
- 权限配置
- 二步登录
- 多环境发布
- serve
- build
- priview
- lint
- 全局功能
#- 国际化多语言
#- 多种动态换肤
- 动态侧边栏(支持多级路由嵌套)
- 动态面包屑
- 快捷导航(标签页)
- Svg Sprite 图标
- 本地/后端 mock 数据
#- Screenfull全屏
- 自适应收缩侧边栏
- 编辑器
- 富文本
- Markdown
#- JSON 等多格式
#- Excel
#- 导出excel
#- 导入excel
#- 前端可视化excel
#- 导出zip
- 表格
- 动态表格
#- 拖拽表格
#- 内联编辑
- 错误页面
- 401
- 404
- 組件
- 头像上传
- 返回顶部
#- 拖拽Dialog
#- 拖拽Select
#- 拖拽看板
#- 列表拖拽
#- SplitPane
#- Dropzone
#- Sticky
#- CountTo
- 综合实例
- 错误日志
- Dashboard
#- 引导页
- ECharts 图表
#- Clipboard(剪贴复制)
#- Markdown2html
```

>注:#---暂未实现(希望大家能一起开发)

## 额外

Expand Down
34 changes: 8 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

**English** | [中文](./README-zh_CN.md)

> vue3 admin plus provides enterprise-level development demo
> vue3 mobile vant provides enterprise-level mobile development demo
A new generation admin construct using vue3(setup-script)+vite2+vant3.x ,It's fast!
A new generation mobile construct using vue3(setup-script)+vite2+vant3 ,It's easy and fast!

Use eslint+prettier+gitHooks format and verification code to improve code standardization and development efficiency


>the rem flexible, vant ui according to 375, but developing is 750 , detail to look the "postcss.config.js"
## Update log

Expand All @@ -34,38 +34,20 @@ github 地址: https://github.com/jzfai/vue3-mobile-vant.git

---- Let's look at the loading speed and the size of the built package first.:

![template-speed-analysis](http://8.135.1.141/file/images/template-speed-analysis.png)
![template-speed-analysis](http://8.135.1.141/file/images/mobile-speed-analysis.png)

![template-demo](http://8.135.1.141/file/images/plus-demo.png)
![template-demo](http://8.135.1.141/file/images/mobile-demo.png)

## Related items

The framework is available in js, ts , plus and electron versions
- js version:[vue3-element-admin](https://github.com/jzfai/vue3-mobile-vant.git)
- ts version:[vue3-element-ts](https://github.com/jzfai/vue3-admin-ts.git)
The framework is available in js, ts versions
- js version:[vue3-mobile-vant](https://github.com/jzfai/vue3-mobile-vant.git)
- ts version:[vue3-mobile-vant-ts](https://github.com/jzfai/vue3-admin-vant-ts.git)
- js version for plus:[vue3-element-plus](https://github.com/jzfai/vue3-admin-plus.git)
- js version for electron:[vue3-element-electron](https://github.com/jzfai/vue3-admin-electron.git)
- react version: [react-admin-template](https://github.com/jzfai/react-admin-template.git)
- java Micro-service background data:[micro-service-plus](https://github.com/jzfai/micro-service-plus)
> development and experience:two words Really fragrant!!!!!


#### Comparison of performance between vue3 and vue2

- 41% reduction in package size

- The initial rendering is 55% faster, the update rendering is 133% faster

- Memory reduction 54%

- **Use Proxy instead of defineProperty to implement data responsiveness**

- **Rewrite the implementation of virtual DOM and Tree-Shaking**


[Comparison of packaging speed between vite2 and webpack](https://github.com/jzfai/vue3-mobile-vant/issues/2)

## Build Setup

```bash
Expand Down
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
"vant": "3.3.7",
"vue-router": "4.0.12",
"vuex": "4.0.2",
"nprogress": "0.2.0",
"vue": "3.2.26"
},
"devDependencies": {
Expand Down
7 changes: 1 addition & 6 deletions src/permission.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
import router from './router'
import NProgress from 'nprogress'
import settings from './settings'
router.beforeEach(async (to, from, next) => {
if (settings.isNeedNprogress) NProgress.start()

//jump page
next()
})

router.afterEach(() => {
if (settings.isNeedNprogress) NProgress.done()
})
router.afterEach(() => {})
6 changes: 6 additions & 0 deletions src/router/modules/example.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
/** When your routing table is too long, you can split it into small modules**/
const exampleRouter = [
{
path: '/example',
component: () => import('@/views/example'),
name: 'Example',
meta: { title: 'Example' }
},
{
path: '/hook',
component: () => import('@/views/example/hook/Hook.vue'),
Expand Down
5 changes: 0 additions & 5 deletions src/settings.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
const setting = {
/**
* @type {boolean} true | false
* @description Whether need nprogress
*/
isNeedNprogress: true,
/**
* @type {boolean} true | false
* @description Whether open prod mock
Expand Down
93 changes: 55 additions & 38 deletions src/views/dashboard/index.vue
Original file line number Diff line number Diff line change
@@ -1,57 +1,74 @@
<template>
<div class="mbPx-4">req relative</div>
<van-button type="primary" size="small" @click="testReq">test Req</van-button>
<div class="mbPx-4 mt-4">基础用法</div>
<van-count-down :time="time" />

<div class="mbPx-4 mt-4">mock demo</div>
<van-button type="primary" size="small" @click="mockRelative">mockRelative</van-button>
<div class="mbPx-4 mt-4">自定义格式</div>
<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />

<div class="mbPx-4 mt-4">VuexUse</div>
<van-button type="primary" size="small" @click="VuexUse">VuexUse</van-button>
<div class="mbPx-4 mt-4">毫秒级渲染</div>
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />

<div class="mbPx-4 mt-4">SvgIcon</div>
<van-button type="primary" size="small" @click="SvgIcon">SvgIcon</van-button>
<div class="mbPx-4 mt-4">自定义样式</div>
<van-count-down :time="time">
<template #default="timeData">
<span class="block">{{ timeData.hours }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.minutes }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.seconds }}</span>
</template>
</van-count-down>

<div class="mbPx-4 mt-4">KeepAlive</div>
<van-button type="primary" size="small" @click="KeepAlive">KeepAlive</van-button>
<div class="mbPx-4 mt-4">手动控制</div>
<van-count-down ref="countDown" millisecond :time="3000" :auto-start="false" format="ss:SSS" @finish="onFinish" />
<van-grid clickable>
<van-grid-item text="开始" icon="play-circle-o" @click="start" />
<van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
<van-grid-item text="重置" icon="replay" @click="reset" />
</van-grid>

<div class="mb-2 mt-5">to look the use demo</div>
<van-button type="primary" size="small" @click="ToExample">ToExample</van-button>
</template>

<script setup>
import { onMounted, watch, ref, toRefs, reactive, computed } from 'vue'
import axiosReq from '@/utils/axiosReq'
import useVant from '@/hooks/useVant'
import useRouter from '@/hooks/useRouter'
const time = ref(30 * 60 * 60 * 1000)
const testReq = () => {
let reqConfig = {
url: '/ty-user/user/loginOut',
method: 'post',
bfLoading: false,
isAlertErrorMsg: false
}
axiosReq(reqConfig).then((res) => {
useVant.vantToastNoneMixin('req success')
})
}
const countDown = ref(null)
//mock
const mockRelative = () => {
useRouter.routerPushMixin('MockTest')
const start = () => {
countDown.value.start()
}
//VuexUse
const VuexUse = () => {
useRouter.routerPushMixin('VuexUse')
const pause = () => {
countDown.value.pause()
}
//SvgIcon
const SvgIcon = () => {
useRouter.routerPushMixin('SvgIcon')
const reset = () => {
countDown.value.reset()
}
import { Toast } from 'vant'
const onFinish = () => Toast('倒计时结束')
import useRouter from '@/hooks/useRouter'
//KeepAlive
const KeepAlive = () => {
useRouter.routerPushMixin('KeepAlive')
//ToExample
const ToExample = () => {
useRouter.routerPushMixin('Example')
}
</script>

<style scoped lang="scss"></style>
<style>
.colon {
display: inline-block;
margin: 0 8px;
color: #ee0a24;
}
.block {
display: inline-block;
width: 44px;
color: #fff;
font-size: 28px;
text-align: center;
background-color: #ee0a24;
}
</style>
Loading

0 comments on commit 1fa443d

Please sign in to comment.