Vue3.0 + antdV 实现的后台管理项目
Evelyn 2021/1/14 5:08:17 次
背景
针对上一篇文章写的小程序项目，需要一个相对应的后台管理系统来对其中一部分资源进行管理，所以衍生了这个后台管理系统项目。由于时间紧迫，内容也不是特别多，于是决定使用市面上现成的 vue 后台项目模板。用的比较多的是 vue-element-admin，一方面想试试新一点的技术 vue3.0，另一方面是因为业务线其他项目都用的 react + antd，个人也比较喜欢 antd ，所以想试试 antd 的 vue UI 框架，所以找到了这个模版：vue-admin-beautiful
项目搭建
- clone 上面说的项目模板（注意分支，使用的是 vue3.0-antdv）
- 按照自己项目的需求，把不需要的内容删掉，按需增加自己需要的内容，如各个页面，公共资源，静态资源等
- 确定并安装项目所需要的其他依赖插件等
该项目主要涉及的技术
4.项目结构
踩坑
国际化
Vue 3.0 不能直接像 2.0 那样直接使用 i18n,3.0 的 i18n 不是写在 main.js 里，而是使用一种 Provide 与 Inject 的方式。在网上找了一堆文章，大部分都还是 2.0 的用法，最后发现两篇帮助很大的文章：
- [ Vue3.0 ] 使用 Vue 3.0 / Vue-cli 4 開發 i18n 國際化 多國語言功能
- Create a i18n Plugin with Composition API in Vue.js 3
参考文章，创建国际化插件文件 i18nPlugins.js，创建 i18n 文件夹，用于存放项目所需要的各个语言的 js 文件，个人习惯把各个页面的多语言文案和页面文件放在一起，所以 src 下的 i18n 文件夹中的 lang 存放的是一些全局可共用的资源，最终多语言相关目录结构如下红框所示：
如何使用？
首先要在 App.vue 文件中使用provideI18n函数正确的配置初始化插件。
// 导入所需要的资源
import { provideI18n } from '@/i18nPlugin'
import langEn from './i18n/en'
import langZh from './i18n/zh'
import langTh from './i18n/th'
// 初始化
setup() {
let langObj = localStorage.getItem('language')
let lang = langObj ? JSON.parse(langObj).language : ''
const locale = lang || navigator.language
let langUsed = ''
if (locale.indexOf('zh') > -1) {
langUsed = 'zh'
} else if (locale.indexOf('en') > -1) {
langUsed = 'en'
} else if (locale.indexOf('th') > -1) {
langUsed = 'th'
}
// 核心代码，langUsed 视项目情况而定
provideI18n({
locale: langUsed,
messages: {
en: langEn,
zh: langZh,
th: langTh,
},
})
},最后，在我们要使用该插件的任何组件中，都必须使用该useI18n函数中的setup函数将其注入。
例如：
！！！需要注意的点
antd-vue 的 table 组件，要想表头内容也实现多语言，需要把 columns 写在 computed 属性里面，如图：
富文本编辑器（Tinymce）
未完待续......
关于找一找教程网
本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[Vue3.0 + antdV 实现的后台管理项目]http://www.zyiz.net/tech/detail-150907.html
您可能感兴趣的文章:
- 2019-06-282014年圣诞节倒计时网页的制作过程
- 2021-01-20TypeScript 中提升幸福感的 10 个高级技巧
- 2021-01-20Webpack5模块联邦源码探究
- 2021-01-192020 一个少年大厂梦的陨落与wlui的诞生
- 2021-01-19前端也能学算法：由浅入深讲解贪心算法
- 2021-01-19事件循环Event Loop
- 2021-01-19小程序云开发实现一个投票应用
- 2021-01-192020 年前端精选文章年度汇总
- 2021-01-18可视化拖拽组件库一些技术要点原理分析（二）
- 2021-01-18这些 JS 中强大的操作符，总有几个你没听说过
扫描二维码或查找【程序员编程王】
可以随时随地学编程啦！
共有 条评论 网友评论