DVTOP的博客

VUE3工程发布后的运行过程为先加载html面，再通过html页中的js加载单页面js来渲染页面并显示。根据这个加载过程，实现页面加载中的原理是预先在html中显示加载中，再单页面数据加载完成在mounted时隐藏加载中，即实现想要的效果。在public/index.html中添加加载中图层，对应的css自己根据需要设计即可。 <div id="dvtop-app-loading"> <div> <div class="dvtop

VUE3中此处使用路由的meta定义页面需要的权限级别来控制权限。在src/router/index.ts中修改如下。 { path: '/', name: 'Home', component: Home, meta: { auth: 2 } }, { path: '/user/login', name: 'UserLogin', component: () => import(/* webpackChunkName: "us

此处国际化选择采用i18n，VUE3必须使用vue-i18n@next安装。antd在 V3 版本开始，默认使用 dayjs 替换了 momentjs 库。所以在国际化时，还要同时完成antd和dayjs的国际化处理。cd dvtop-designernpm install vue-i18n@next --savenpm install dayjs --save创建语言文件，如zh_cn.ts，类似方法创建zh_tw.ts、en_gb.ts等。module.exports = {

为什么选择V3，引用官方说明。2.x 版本是为了兼容 Vue 3 开发的兼容版本，他并没有带来很多新的特性，大多数的 API 改变也只是为了更好的兼容 Vue 3。 3.x 版本在性能、易用性、功能上都有了很大的提升，3.x 版本稳定后，我们会归档 2.x 版本，建议您尽快升级 3.x 版本。虽然有很多改动，但基本都做了兼容，你可以按照控制台给出的警告逐步升级。cd dvtop-designernpm install ant-design-vue@3.0.0-alpha.10 --save

开发操作系统为macOS Big Sur V11.6。如后续无特别说明，均是此环境。一、环境准备1、NPM，LTS稳定版https://nodejs.org/en/download/current/Latest LTS Version: 16.13.0 (includes npm 8.1.0)macOS Binary (.tar.gz)，下载node-v16.13.0-darwin-x64.tar.gztar zxvf node-v16.13.0-darwin-x64.tar.gzvi ~/.