diff --git a/README-zh_CN.md b/README-zh_CN.md index a1d1907..6e16102 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -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"配置文件 ## 更新日志 @@ -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 @@ -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 -``` - ->注：#---暂未实现(希望大家能一起开发) ## 额外 diff --git a/README.md b/README.md index c984f46..31397cc 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 diff --git a/package.json b/package.json index 035142d..db2a0d9 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/permission.js b/src/permission.js index 235abbb..d6e38dd 100644 --- a/src/permission.js +++ b/src/permission.js @@ -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(() => {}) diff --git a/src/router/modules/example.js b/src/router/modules/example.js index 4c86f17..57056fd 100644 --- a/src/router/modules/example.js +++ b/src/router/modules/example.js @@ -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'), diff --git a/src/settings.js b/src/settings.js index d2e2040..21608e8 100644 --- a/src/settings.js +++ b/src/settings.js @@ -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 diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index b7475e2..e4c8608 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,57 +1,74 @@ + diff --git a/src/views/example/Example.vue b/src/views/example/Example.vue new file mode 100644 index 0000000..b7475e2 --- /dev/null +++ b/src/views/example/Example.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/src/views/example/hook/Hook.vue b/src/views/example/hook/Hook.vue index 3243001..bc45ee2 100644 --- a/src/views/example/hook/Hook.vue +++ b/src/views/example/hook/Hook.vue @@ -11,7 +11,6 @@ let { ref1, ref2, hooksFunc } = testHooks() const hookExample = () => { hooksFunc() } -console.log(`获取到hook导出的数据${(ref1, ref2)}`) diff --git a/src/views/example/index.js b/src/views/example/index.js new file mode 100644 index 0000000..4c36818 --- /dev/null +++ b/src/views/example/index.js @@ -0,0 +1,2 @@ +import component from './Example.vue' +export default component diff --git a/src/views/example/keep-alive/RouterDemoS.vue b/src/views/example/keep-alive/RouterDemoS.vue index f894098..76db2c0 100644 --- a/src/views/example/keep-alive/RouterDemoS.vue +++ b/src/views/example/keep-alive/RouterDemoS.vue @@ -14,7 +14,6 @@ diff --git a/vite.config.js b/vite.config.js index f009663..5a83a89 100644 --- a/vite.config.js +++ b/vite.config.js @@ -116,5 +116,8 @@ export default ({ command, mode }) => { } } } + // optimizeDeps: { + // include: ['vant/lib/index.css'] + // } } }