uniapp引入vue

Easter79 等级 141 0 0
标签: vue

首先目录结构是这样的

uniapp引入vue

lib文件夹里面存放四个js文件,ch(存放中文语言)、en(存放英文语言)、index(设置语言)、vue-i18n(vue-i18n插件);同时在main.js中配置就可以使用了;

ch.js

export default {
    index: {
        msg: '信息'
    }
}

en.js

export default {
    index: {
        msg: 'information'
    }
}

index.js

// 引入文件
import LangEn from './en.js'
import LangChs from './ch.js'
import Vue from 'vue'
import VueI18n from './vue-i18n'
Vue.use(VueI18n)
// 在本地存储中找用户设备信息,如果没有则获取用户设备信息
const system_info = uni.getStorageSync('system_info')
if (!system_info) {
    // 获取设备信息
    uni.getSystemInfo({
        success: function(res) {
            // 存到storage里面,后续操作都需要用到
            uni.setStorageSync('system_info', res);
        }
    })
}
// 如果他的设备默认语言是英文的话就用英文,否则用中文;
const cur_lang = system_info.language == 'en' ? 'en' : 'zh_CN'
const i18n = new VueI18n({
    locale: cur_lang || 'zh_CN', // 默认选择的语言
    /* 如果需要其他语言,在lib文件夹下创建js文件,引入,并在下面messages导入即可 */
    messages: {
        'en': LangEn,
        'zh_CN': LangChs
    }
})
export default i18n

main.js

import Vue from 'vue'
import App from './App'
import i18n from './lib/index.js' 
// 将其放到vue的原型上面
Vue.prototype._i18n = i18n

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    i18n,
    ...App
})
app.$mount()

示例

<template>
    <view class="container">
        <text>{{ i18n.msg }}</text>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        //  利用计算属性来判断当前是中文还是英文
        computed: {
            i18n() {
                return this.$t('index')
            }
        },
    }
</script>

vue-i18n文件转移到网盘

https://pan.baidu.com/s/11uSOpBwlCXEvp79_D3ktpQ,提取码:s7gv

收藏
评论区

相关推荐

史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d
Vite使Vue CLI过时了吗?
![](https://oscimg.oschina.net/oscnet/b9aed6aa-9d14-4fd3-82b8-e1724221ee71.jpg) **文末福利资源更新** Vue生态系统中有一个名为Vite的新构建工具,它的开发服务器比Vue CLI快10-100倍。 这是否意味着Vue CLI已经过时了?在本文中,我将比较这两种构
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; #设置中文 import moment from 'm
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue CLI 2.x搭建vue,目录最全分析
一、vue-cli介绍 =========== vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 ============== 安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用): cnpm install -g vue-cli 更新: cnpm update
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Vue 开发必须知道的 36 个技巧
![](https://oscimg.oschina.net/oscnet/b77f0c050deecad634f32cd1bb74d303512.jpg) 作者: 火狼 https://segmentfault.com/a/1190000020620972 关注Vue中文社区,每日精选好文 前言 ==
Vue+Spring Boot简单用户登录Demo
1 概述 ==== 前后端分离的一个简单用户登录`Demo`。 2 技术栈 ===== * `Vue` * `BootstrapVue` * `Kotlin` * `Spring Boot` * `MyBatis Plus` 3 前端 ==== 3.1 创建工程 -------- 使用`vue-cli`创建,没安装的可以先安装
uniapp引入vue
首先目录结构是这样的 ![目录](https://oscimg.oschina.net/oscnet/up-c38df71b7be4ebcdafdc248216aa3f69e64.png "目录") > lib文件夹里面存放四个js文件,ch(存放中文语言)、en(存放英文语言)、index(设置语言)、vue-i18n(vue-i18n插件);同时在m
vue echarts vue
1、git地址 [https://github.com/ecomfe/vue-echarts](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fecomfe%2Fvue-echarts) 2、使用 (1)安装 npm install vue-echa