国际化实现之安装脚手架vue

做这个项目用的是vue+element UI来实现的响应式布局,现主要说一下国际化这块的实现。

第一步:新建文件夹i18n

第二步:配置cn.js、en.js等文件内容

cn.js

import enLocale from ‘element-ui/lib/locale/lang/zh-CN‘
const cn = {
  message: {
    ‘mes‘: ‘你好‘,
  },
  ...enLocale
}  

export default cn;  

en.js

import enLocale from ‘element-ui/lib/locale/lang/en‘
const en = {
  message: {
    ‘mes‘: ‘hello‘,
  },
  ...enLocale
}  

export default en; 

index.js

import en from ‘./en.js‘;
import cn from ‘./cn.js‘;
export default {
  en: en,
  cn: cn
}  

i18n.js

import Vue from ‘vue‘
import locale from ‘element-ui/lib/locale‘
import VueI18n from ‘vue-i18n‘
import messages from ‘./langs‘
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: localStorage.lang || ‘cn‘,
    messages,
})
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

第三步:在main.js中配置

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import ‘./assets/css/reset.css‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘
import ‘element-ui/lib/theme-chalk/display.css‘ //布局隐藏
import i18n from ‘./i18n/i18n‘

Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
i18n,
router,
components: { App },
template: ‘<App/>‘
})

第四步:在哪个页面看到就在哪个页面使用,这里直接是app.vue简单说一下

//页面的切换操作:<el-menu-item index=‘7‘ @click=‘cn()‘>中</el-menu-item>
<el-menu-item index=‘8‘ @click=‘en()‘>英</el-menu-item>
//对应的方法展示<script>
    export default {
        name: ‘App‘,
        data() {
        },
        methods: {
            en() {
                this.$i18n.locale = ‘en‘
            },
            cn() {
                this.$i18n.locale = ‘cn‘
            }
        }
    }
</script>
//对应的切换方法展示不同语言的内容
<p class="title title-chinese"><span>{{$t("message.mes")}}</span></p>

通过这四个简单的实现了一个基于脚手架安装的vue的项目国际化。

原文地址:https://www.cnblogs.com/wanan-01/p/9275026.html

时间: 2024-11-08 01:46:26

国际化实现之安装脚手架vue的相关文章

安装Vue安装脚手架以及一直卡着不动的问题

1.首先我们去nodejs官网:https://nodejs.org/en/download/ (下载nodejs,下载自己电脑想匹配的最新版本) 2.其次 去下载一个cnpm (注释:淘宝npm镜像,这个是阿里把外国的npm服务器搬到我们中国来了,用淘宝镜像npm下载一些配置文件会更快一些) 操作如下:电脑右下角  window输入cmd, 把 npm install -g cnpm --registry=https://registry.npm.taobao.org 复制到cmd里面去就可以

在sublime 编辑器中,安装插件 Vue Syntax Hightlight,高亮识别Vue.js 的单文件组件(*.vue)

转自:http://www.cnblogs.com/cosnyang/p/6290950.html 默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 sublime 中打开 PackageControl 如下图,快捷键 Ctrl+Shift+P. 第二,打开 Install Package 窗口.下图中第一个,回车. 打开过程中,右下角出现状态栏.如下图

vue - 安装脚手架

最近初始化拉取总是失败,后采用yarn一步到位! npm i -g @vue/cli && npm i -g @vue-init/cli && npm i -g yarn 初始化注意这最后一点即可 可以看到,速度很快 好,安装完成以后,我们看看启动! 关于配置,请查看: 我们去浏览器打开这个地址 启动完成,脚手架搭建完毕! 原文地址:https://www.cnblogs.com/cisum/p/8611970.html

Webpack 安装配置vue环境

前言 第一次写东西,可能会比较乱,还请理解! 安装步骤 打开命令行工具,输入 node -v 查看NodeJS的版本号,若未出现版本号则请移步http://nodejs.cn/download/ 进行下载安装, 若安装成功,则查看npm是否安装,输入 npm -v 查看npm是否成功安装. 上述工作准备之后,就可以来进行vue的安装了. 可以打开https://cn.vuejs.org/v2/guide/installation.html查看官网给的安装步骤,虽然我的看起来会有些多余,但是也是为

npm安装教程(vue.js)

https://www.cnblogs.com/goldlong/p/8027997.html 首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Google V8引擎进行的封装.是一个服务器端的javascript的解释器. 包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm -v会发现出啊线npm的版本号,说明npm已经安装好. 引用大神的总结: 其实npm是nodejs的包管理器(package manager

Vuejs2.0 cnpm 安装脚手架项目模板

NPM 方法 因为npm 安装速度慢,所以我们可以使用淘宝的镜像cnpm 再安装之前 我们需要先安装nodejs  因为vue框架也是基于nodeljs 下载地址:http://nodejs.cn/download/ 1 . 安装淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 2 . 最新稳定版 vue cnpm install vue 3 . 全局安装 vue-cli cnpm install --glo

vue初学之node.js安装、cnpm安装、vue初体验

1. 如果本机没有安装node运行环境,请下载node 安装包进行安装.地址:https://nodejs.org/en/ 2.装完,使用cmd命令行输入:node -v回车 如果输出版本号则成功. 3.输入npm -v回车可查看npm的版本号 4.因为npm是国外的服务器,所以使用的时候响应很慢,可以安装国内的淘宝镜像. 在终端输入:npm install -g cnpm --registry=https://registry.npm.taobao.org回车 等待挺长一段时间,安装成功后即可

利用脚手架vue cli搭建vue项目

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v  (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新

VUE devtools 调试工具安装 让vue飞起来

安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools npm install || cnpm install -- npm&cnpm i 到文件夹shells下 chrome 下打开manifest.json 文件 把"persistent":false改成true 接着 num run build 打开chrome浏览器