阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    vue-i18n 教程

    Vue I18n

    Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

    开始

    我们将在指南中的代码示例中使用 ES2015 语法。

    HTML

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
    
    <div id="app">
      <p>{{ $t("message.hello") }}</p>
    </div>
    

    JavaScript

    // 如果使用模块系统 (例如通过 vue-cli),则需要导入 Vue 和 VueI18n ,然后调用 Vue.use(VueI18n)。
    // import Vue from 'vue'
    // import VueI18n from 'vue-i18n'
    //
    // Vue.use(VueI18n)
    
    // 准备翻译的语言环境信息
    const messages = {
      en: {
        message: {
          hello: 'hello world'
        }
      },
      ja: {
        message: {
          hello: 'こんにちは、世界'
        }
      }
    }
    
    // 通过选项创建 VueI18n 实例
    const i18n = new VueI18n({
      locale: 'ja', // 设置地区
      messages, // 设置地区信息
    })
    
    
    // 通过 `i18n` 选项创建 Vue 实例
    new Vue({ i18n }).$mount('#app')
    
    // 现在应用程序已经准备好了!
    

    输出如下:

    <div id="#app">
      <p>こんにちは、世界</p>
    </div>
    

    NPM

    npm install vue-i18n
    

    Yarn

    yarn add vue-i18n
    

    如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    
    Vue.use(VueI18n)
    
    

    如果使用全局的 script 标签,则无须如此 (手动安装)。

    Vue Cli 3.x

    vue add i18n
    

    你需要 Vue cli 3.x 作为先决条件,你可以在命令行上使用下面的命令来安装:

    npm install @vue/cli -g
    

    开发版构建

    如果你想使用最新的开发版构建,就得从 GitHub 上直接 clone,然后自己构建一个 vue-i18n。

    git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
    cd node_modules/vue-i18n
    npm install # or `yarn`
    npm run build  # or `yarn run build`
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录