vue-i18n国际化插件
vue-i18n国际化插件安装,到项目目录下执行：npm install vue-i18n配置在src\main.js里面引入vue-i18n // 语言包插件import VueI18n from 'vue-i18n'import chinese from './assets/lang/chinese'import english from './assets/lang/english'Vue.use(VueI18n)const i18n = new VueI18n({ locale: 'chinese...
2024-01-10
vue之v-on
我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script></head><body> <div id="demo"> <button @click="counter += 1">{{counter}}</button> ...
2024-01-10
vue-admin登录
1、先验证用户名和密码是否填写，然后验证图片二维码是否输入正确。如果正确就执行：login.vue2、Login是写在user.js的actions的动作： user.js3、在permission.js里面进行登录验证，如果没有获取到token就返回登录页面，并且对token进行了过期验证：4、因为之前是使用mock模拟数据，所以还需要将pro.env.js以...
2024-01-10
Vue v-bind指令
1.1 v-bind 指令被用来响应地更新 HTML 属性，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）。2. 语法2.1 完整语法：<span v-bind:class="classProperty"></span >，解释：v-bind 是指令，: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。2.2 缩写语法：<span :class="classProperty"></span >，解...
2024-01-10
vue-admin打包报错
npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! vue-admin-template@3.8.0 build: node build/build.jsnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the vue-admin-template@3.8.0 build script.npm ERR! ...
2024-03-05
使用 vue-i18n 切换中英文
vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n兼容性：支持 Vue.js 2.x 以上版本 安装方法：（此处只演示 npm）npm install vue-i18n 使用方法：1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）import VueI18n from 'vue-i18n'Vue.use(VueI18n) 2、准备本地的翻译信息const messages = {zh: {message: {hello: '...
2024-01-10
vue实现国际化（vue-i18n）
使用vue-i18n插件来实现vue项目中的国际化功能vue-i18n安装npm install vue-i18n全局使用import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)const messages = { 'en-US': { message: { hello: 'hello word' } }, 'zh-CN': { message: {...
2024-01-10
vue-i18n，vue的前端国际化
vue的前端国际化用的国际化插件是 vue-i18n，附上 github 传送门。1，开发环境，用vue-cli 官方脚手架把开发环境给运行起来2、安装 vue-i18n$ npm install vue-i18n3、注入 vue 实例中，实现调用 api 和 语法先在 main.js 中引入 vue-i18n。import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI...
2024-01-10
一起学vue指令之v-bind
一起学 vue指令 v-bind 网页的图片url地址并不是固定写死的，如果写死，每一个活动就改一次图片的url,一个网页有多少张图片，工作量多大？通常来说，客户端向服务器发送请求，服务器返回url数据到vue实例的data...
2024-01-10
vue i18n 接受多個文件？
有個問題import ch from '@/utils/lang/ch'import en from '@/utils/lang/en'import enWork from '@/utils/lang/enWork'import chWork from '@/utils/lang/chWork'const i18n = new VueI18n({ locale: 'ch', <-- ...
2024-02-17
vue项目国际化，基于vue-i18n实现
1，安装vue-i18n。在命令行输入：npm install vue-i18n 或 cnpm install vue-i18n2，main.js文件中，配置vue-i18n相关的配置。（红框的部分）3，找到assets文件夹，新增languages文件夹，新建en.json（英文文件），新建zh.json（中文文件）4，添加中英文文件相关数据5，在相应页面添加对应的中英文属性。使用$t('定...
2024-01-10
Vue模板语法V-bind
一、插值1.文本<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引...
2024-01-10
vue学习——v-on实例
v-on绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内...
2024-01-10
vue-i18n 如何结合后台接口实现国际化
后台接口返回结果：前台创建了 zh-Cn.js 和 en-Us.js 文件，用来请求这个接口；但是使用下面的写法去写，总是不成功，或者有没有大佬提供一种 module.exports 的异步写法。。。// zh-Cn.jsconst {getSysI18n} = require("@/api/api"); // 封装好的国际化的接口let message = {};getSysI18n({ // 进行请求sysKey: "" ...
2024-01-10![[Vue]使用 vue-i18n 实现国际化](/wp-content/uploads/thumbs/533638_thumbnail.jpg)
[Vue]使用 vue-i18n 实现国际化
1、引入 vue-i18n import Vue from 'vue'import VueI18n from 'vue-i18n'import merge from 'lodash/merge'2.准备本地的文言信息const messages = { zh: { message: { hello: '好好学习，天天向上！' } }, en: { message: { hello: 'good good study, day day...
2024-01-10
利用vue-i18n实现多语言切换效果的方法
前言有些项目我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。安装vue-i18n我们使用npm安装vue-i18n。npm install vue vue-i18n --save引入vue-i18n首先...
2024-01-10![[vue]绑定事件 - pinked](/wp-content/uploads/thumbs/533765_thumbnail.jpg)
[vue]绑定事件 - pinked
[vue]绑定事件 绑定事件点击事件<div id="app"> <button v-on:click="hello">hello</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script> var vm = new Vue({ el: "#app", data: { messag...
2024-01-10vue项目中使用vue-i18n报错的解决方法
前言Vue-i18n大家应该都不陌生，Vue-i18n安装的安装方法如下：npm install vue-i18n --save然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧发现问题iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到以...
2024-01-10vue使用vue-i18n实现国际化的实现代码
需求公司项目需要国际化，点击按钮切换中文/英文1、安装npm install vue-i18n --save2、注入 vue 实例中，项目中实现调用 api 和 模板语法import VueI18n from 'vue-i18n'Vue.use(VueI18n) ;const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale messages: { 'zh-CN': requi...
2024-01-10
vue-i18n国际化在data中切换不起作用
vue-i18n是一个针对于vue的国际化插件，使用非常简单，具体使用方式看我细细道来。实现方式1. 下载包npm install vue-i18n2. 配置在main.js文件中加入如下配置// 引入插件和语言包import VueI18n from 'vue-i18n'import zh from '@/i18n/langs/zh'import en from '@/i18n/langs/en'Vue.use(VueI18n)//实例化vue-i18nconst i18n = new VueI18n({...
2024-01-10vue使用i18n实现国际化的方法详解
一、前言在4k广告机中需要实现多语言切换，这时候接触到国际化，前端框架无数，其中几种热门的框架都有相匹配的国际化插件工具。比如：vue + vue-i18nangular + angular-translatereact + react-intljquery + jquery.i18n.property在4K广告机项目中使用的前端框架为Vue，故而我们将使用vue-i18n这个插件进行国际...
2024-01-10
vue中使用Mint-UI移动端组件库
用官方提供的vue-cli来搭建一个vue项目，在我前面的博文中有介绍，这里假定大家已经构建了自己的vue工程。这里是我的项目结构fraudApps：一、Mint-UI移动端组件的安装安装Mint-UI：npm i mint-ui --save安装完成后package.json中可以看到mint-ui的版本号：二、Mint-UI的使用：使用之前我们需要引入组件，引入组...
2024-01-10
vue之mixin混入偷懒技术
mixin分发vue组件中的可复用功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>mixin的应用</title></head><body> ...
2024-01-10
vue中v-on支持的事件总结
资源事件事件名称何时触发error资源加载失败时。abort正在加载资源已经被中止时。load资源及其相关资源已完成加载。beforeunloadwindow，document 及其资源即将被卸载。unload文档或一个依赖资源正在被卸载。网络事件事件名称何时触发online浏览器已获得网络访问。offline浏览器...
2024-01-10vue 国际化 vue-i18n 双语言 语言包
1.安装vue-i18n2.在main.js里面引用import VueI18n from 'vue-i18n'Vue.use(VueI18n)3.实例化i18n，并配置默认的语言模式，以及对应的文件（也是在main.js里使用）如下。cn 中文包对应的是cn.jsen 对应的是英文 en.js 包const i18n = new VueI18n({ //定义默认语言 locale: 'cn', messages:{ 'cn': require('./common/lang/cn'), 'en': r...
2024-01-10
