目录第一步：第二步：第三步：第四步：最后：前言：我们有时候会遇到一个项目需要支持多语言，而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需要用到 i18n ，这个插件的作用是创建这个自己的字典，使其切换语言时用到的文案是自己编写的，这样就可以做到实现自己想表达的效果. 话不多说，直接上源码：第一步：首先呢，肯定是先
一、实现国际 首先，我开发是以 vue 为技术栈，所以如题用的国际化插件是 vue-i18n，附上 github 传送门。1、我们得先有开发环境，先有项目跑起来，我推荐如果是喜欢用 vue 的小伙伴，可以尝试 vue-cli 官方脚手架。这边有我整理的一个脚手架 demo ，有助于你快速的进行 vue 模块化开发。2、我们需要安装 v
vue-i18n1. 安装2. 配置3. i18n使用4. 常用方法5. v-t 使用6. 组件插值 最近vue项目遇到需求，将项目全局国际化，要求中、英、日三种语言自由切换，在这里记录一下vue-i18n国际化语言包处理插件的使用，具体可参考: vue-i18n官方文档。1. 安装npm install vue-i18n --save2. 配置src目录下新建i18n目录，en.js英文语
转载
2024-07-08 09:37:02
509阅读
main.ts引入i18n import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus ...
转载
2021-09-04 09:10:00
775阅读
2评论
vue-i18n 多语言(国际化) 切换 初学使用不少网站有多语言模式，正好项目里需要多语言切换，简单学习之后，整理成文章，加深记忆。概述Vue I18n 是 Vue.js 的国际化插件，格局比较大，具体怎么解释还是不太好说，直接看用法就能明白。简单说一下为什么叫这个名字：internationalization(i+中间的18个字母+n)。如果你更喜欢看官方文档可以移步下面的官方文档，本文只是基
转载
2024-02-05 00:25:54
446阅读
Vue3+TypeScript 项目创建一、安装`Node.js`二、卸载旧版本（安装过vue2的）1.查看vue版本2.卸载旧版本3.安装新版本4.查看当前版本三、初始化项目1.选择需要安装项目的位置2.新建项目3.选择更快的源，选择`Y`4.请选择预设模式5.配置项目6.选择3.x7.选择Class样式组件8.使用Babel转义9.不开启路由模式（可能出现打包后，白页情况）10.选择一种cs
转载
2024-10-13 21:54:54
56阅读
前言之前看了雪碧大佬的将 React 渲染到嵌入式液晶屏觉得很有意思,React能被渲染到嵌入式液晶屏,那Vue是不是也可以呢？所以本文我们要做的就是:如标题所示,就是将Vue渲染到嵌入式液晶屏。这里使用的液晶屏是0.96 寸大128x64分辨率的SSD1306。要将Vue渲染到液晶屏,我们还需要一个桥梁,它必须具备控制液晶屏及运行代码的能力。而树莓派的硬件对接能力和可编程性天然就具
我了解nuxt团队正在开发nuxtClientInit功能，但是在发布之前，您可以自己制作。要了解nuxt在有请求时承担的工作流程，您可以在此处查看其生命周期。这表明首先调用nuxtServerInit，然后再调用中间件。在此中间件调用期间，将提供nuxt.config.js，其中包含您的自定义配置。其中一部分是“插件”，如文档所述，通过此选项，您可以定义在实例化根Vue.js应用程序之前应运行的
本次记录基于iview3框架实现多级菜单+vue router实现页面切换方法一：使用Tree 树形控件，官方文档https://www.iviewui.com/components/tree以官方demo为例，数据中添加URL属性，用于路由跳转，正式项目中该tree控件的数据由后端给出，需要注意的是后端给出的URL跳转地址最前一定要看清有没有"/" ，如果没有自己手动加或后端改，没有这
Vue在GitHub上面的star数量已经超过了react，虽然npm包下载的数量还没有react多，但是Vue上升的势头真的很猛。Vue生命周期2.0和1.0差别还是有一点的，生命周期的博客文章百度也是很多，今天我简单提一下生命周期，然后说一下一些可能比较没人注意的点。先上Vue官网的生命周期图片： 先罗列出生命周期然后一个一个讲解beforeCreatecreatedbeforeM
index.js
import { createI18n } from 'vue-i18n'
import cache from '@/utils/cache'
// element-plus 国际化文件
import element_zh_cn from 'element-plus/lib/locale/lang/zh-cn'
import element_en from 'element-pl
前言有时候一个项目的主题并不能满足所有人的审美, 所以这个时候就需要换肤功能登场了。 下面是一个换肤demo, 思路很简单，定义一个全局css变量，然后在页面根元素获取变量并动态修改这个变量值即可完成。效果具体实现1.准备项目准备一个含有less、vuex的项目2.安装插件yarn add style-resources-loader vue-cli-plugin-style-resources-
转载
2024-03-27 10:31:28
971阅读
一、Props 声明一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute在使用SFC时，props 可以使用 defineProps() 宏来声明：如子组件中
(1)
const props = defineProps(['foo'])
(2)
const props = defineProps({
title:Stri
转载
2023-12-25 09:27:02
125阅读
前端上传大文件、视频的时候会出现超时、过大、很慢等情况，为了解决这一问题，跟后端配合做了一个切片的功能。我这个切片功能是基于 minion 的，后端会把文件放在minion服务器上。具体看后端怎么做1、在项目的 util(这个文件夹是自己创建的，如果项目里没有可以自行创建) 文件家中创建一个js文件 upload.jsimport axios from 'axios';
import m
程序员利用自己的技术，在业余时间接点私活，赚点小钱，补贴家用，是一个非常不错的选择。但是有些私活项目做得东西有点重复，完全可以借助公用项目完成。本文推荐十个可以直接使用的，程序员接私活必备的辅助项目，帮你快速赚钱。AdminLTEGithub Star 数近 31000 ， Github 地址：https://github.com/almasaeed2010/AdminLTE非常流行且免费的基于
vue后台管理系统——添加i18n国际化功能场景1.安装`i18n`插件，如果是使用的`vue-admin`的框架，则已经安装过了2.在`utils`文件夹中添加`i18n.js`文件——路由的国际化需要单独处理，其他的国际化是可以用公用国际化文件的3.`router`中添加`i18n.js`文件——路由的国际化需要单独处理，其他的国际化是可以用公用国际化文件的4.`utils`中添加`rout
本文为Varlet组件库源码主题阅读系列第十篇，也是最后一篇，读完本篇，可以了解到如何通过创建一个Vue3响应式对象就可以轻松实现国际化的需求。
原创
2022-10-23 01:00:50
65阅读
/ 导入自定义的语言包 -- 英文和中文// 默认语言: 'zh', 即中文// 语言包// 英文en,// 中文zh})
全世界范围内广受欢迎的 Vue UI 框架，一个非常精致的 Material Design UI 套件。Material Design 风格 UI 框架Vuetify 是一个基于 Vue.js 精心打造 UI 组件库，整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。Material Design 是 Google 推出的设计语言，
vue-i18n一、安装1、直接下载 / CDNhttps://unpkg.com/vue-i18n/dist/vue-i18nunpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以通过 https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js 这样的 URL 指定版本号或者 tag。在 Vue
