I18n basis
kazupon / View-i18n
Github state
Start 3k+，Fork <1k+
Brief introduction
Vue I18n is Vue.js international plug. It can easily be some localized functionality into your Vue.js application.
characteristic:
Localization various formats
Diversification
DateTime Localization
Number Localization
Based on the localization of components
Component of the interpolation
Localization reserve
Project Experience
| Use Evaluation |
| basic function |
| The perfect support for multiple languages. |
| Use project |
|
|
| Technical Support |
|
|
Framework Resource
| i18n |
| Github |
| https://github.com/kazupon/vue-i18n |
| Official website |
| https://kazupon.github.io/vue-i18n/ |
| Doc |
| https://kazupon.github.io/vue-i18n/ |
| Demo |
| https://kazupon.github.io/vue-i18n/ |
| Blog |
|
|
Demo Run
npm install vue-cli -g
npm/yarn install
npm run dev
i18n integration
i18n Vue Configuration
VUE integrated into the project (global) ref
| I18n integration |
| Vue project |
| npm install vue-i18n |
| rely |
|
|
| main.js |
| import VueI18n from 'vue-i18n' Vue.use (VueI18n) const i18n = new VueI18n({ locale: 'zh', // language identifier messages: { 'zh': require('./locales/zh'), // zh.json 'In': require ( './ local / en') } }) new view ({ the '#app' i18n, components: {App}, template: '<App/>' }) |
zh.json
| { "lang": { "name": "I18n本地化" }, "links": { "docs": "Documentation", "github": "GitHub" } } |
集成到VUE工程(单组价) ref
| I18n集成 |
| Vue工程 |
| npm i --save-dev @kazupon/vue-i18n-loader |
| 依赖 |
|
|
| vue-loader.conf.js |
| const loaders = utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction, i18n: '@kazupon/vue-i18n-loader' })
// i18n单组件支持 const i18n = '@kazupon/vue-i18n-loader' // 国际化 loaders.i18n = i18n |
I18n的文本定义
| // 全局
// 单组件 <i18n> { "zh": { "vd.ii.card.tv": "浏览器" }, "en": { "vd.ii.card.tv": "Browser" } } </i18n> |
I18n的访问
| // html <div>{{$t('lang.name')}}</div> // JavaScript this.$t('lang.name') |