企查查企业信息查询网站/seo标签怎么优化

学习vue-i8n,遇到了一些自己疏忽的问题。总结一下

1. 首先要在vue项目中使用，
2. yarn add vue-i18n
3. yarn add element-ui （注释：之后点击时候的弹窗是基于这个插件来做的）

文件目录

en.js中的代码

module.exports = {message: {title: 'Sport Brands'},placeholder: {enter: 'Please type in your favorite brand'},brands: {nike: 'Nike',adi: 'Adidas',nb: 'New Banlance',ln: 'LI Ning'}
};

// 注意：一定是 exports，不是 export，否则会报错，报错信息是下列的中的内容不是 string
module.exports = {message: {title: '运动品牌'},placeholder: {enter: '请输入您喜欢的品牌'},brands: {nike: '耐克',adi: '阿迪达斯',nb: '新百伦',ln: '李宁'}
};

index.js

import messagesEn from './en'
import messagesZh from './zh'const messages = {en: {message: messagesEn},zh: {message: messagesZh}
};export default messages

cookie.js

function getCookie(name,defaultValue) {var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");if (arr = document.cookie.match(reg))return unescape(arr[2]);elsereturn defaultValue;
};export default  getCookie

main.js

import Vue from 'vue'

import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
import getCookie from './cookie/cookie'
const i18n = new VueI18n({locale: getCookie('PLAY_LANG','en'),// 语言标识
    messages: {'zh': require('./language/zh'),'en': require('./language/en')}
});
//=>饿了么插件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 导入轮播图插件
import VueAwesomeSwiper from 'vue-awesome-swiper';
// 使用轮播图插件
Vue.use(VueAwesomeSwiper);
import 'swiper/dist/css/swiper.css';
// 图片懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {preLoad: 1.3,error: 'http://img1.imgtn.bdimg.com/it/u=3779605030,1222595953&fm=27&gp=0.jpg',loading: 'http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif',attempt: 1
});
import store from './vuex'
new Vue({el: '#app',router,store,i18n,template: '<App/>',components: { App }
});

User.vue

<template><div id="app"><MHeader>个人中心</MHeader><div class="test"><div  style="margin: 20px;"><h1 style="color: black;font-size: 45px">{{$t("message.title")}}</h1><input style="width: 300px;" class="form-control" :placeholder="$t('placeholder.enter')"><ul><li>{{$t("brands.nike")}}</li><li>{{$t("brands.adi")}}</li><li>{{$t("brands.nb")}}</li><li>{{$t("brands.ln")}}</li></ul></div><button type="button" class="btn btn-success" @click="changeLangEvent">中文/EN</button></div></div></template>
<script>import MHeader from '../base/MHeader.vue'
  export default {components: {MHeader},methods: {changeLangEvent() {this.$confirm('确定切换语言吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
        }).then(() => {if (this.lang === 'zh') {this.lang = 'en';this.$i18n.locale = this.lang;//关键语句
          } else {this.lang = 'zh';this.$i18n.locale = this.lang;//关键语句
          }}).catch(() => {/* this.$brand({
             type: 'info',
           });*/
        });},},}</script>
<style scoped lang="less">.test{position: absolute;top:60px;}ul>li{font-size: 16px;color: green;}
</style>