국제화 기준
kazupon /보기 - 국제화
Github에서의 상태
+ 3K +, 포크 <1K 시작
간략한 소개
뷰 국제화는 국제 플러그 Vue.js입니다. 그것은 쉽게 Vue.js 응용 프로그램에 몇 가지 지역화 기능이 될 수 있습니다.
특징 :
현지화 다양한 형식
다원화
날짜 시간 현지화
번호 현지화
부품의 현지화를 바탕으로
보간의 구성 요소
현지화 예약
프로젝트 경험
| 사용 평가 |
| 기본 기능 |
| 여러 언어에 대한 완벽한 지원을 제공합니다. |
| 사용 프로젝트 |
|
|
| 기술 지원 |
|
|
프레임 워크 자원
| 국제화 |
| Github에서 |
| https://github.com/kazupon/vue-i18n |
| 공식 웹 사이트 |
| https://kazupon.github.io/vue-i18n/ |
| 의사 |
| https://kazupon.github.io/vue-i18n/ |
| 데모 |
| https://kazupon.github.io/vue-i18n/ |
| 블로그 |
|
|
데모 실행
NPM 설치 VUE-CLI -g
NPM / 실 설치
NPM 실행 DEV
국제화 통합
국제화 뷰 구성
VUE 프로젝트에 통합 (글로벌) REF
| 국제화 통합 |
| 뷰 프로젝트 |
| NPM VUE-국제화를 설치 |
| 의지 |
|
|
| main.js |
| 'VUE-국제화'에서 수입 VueI18n Vue.use (VueI18n) const를 국제화 = 새로운 VueI18n ({ 로케일 '에서 zh', // 언어 식별자 메시지 : { '에서 zh은'( './ 로케일 /에서 zh'), // zh.json 필요 '에서'( './ 지방 / EN')이 필요합니다 } }) 새로운 뷰 ({ '#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') |