一.国际化语言
1.下包
npm i vue-i18n@7.3.3
注意:这里下载的是7.3.3版本,如果没有指定版本vue2好像不能使用。
这是出现的报错。
2.根目录下----------lang/index.js
// 引入vue-i18n包
import VueI18n from "vue-i18n";
import Vue from "vue";
// 应用vuei18n
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: "zh",
// 配置语言文件对象
messages: {
en: {
home: "home",
},
zh: {
home: "首页",
},
},
});
export default i18n;
3.挂载main.js
import i18n from '../lang/index'
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')
4.打印vue实例
这样我们就可以在vue的实例上使用我们挂载的方法对象了。
5.使用
<template>
<div>
<div>{{ $t("home") }}</div>
<button @click="fn">点击切换</button>
</div>
</template>
<script>
export default {
created(){console.log(this);
},
methods:{
fn(){
this.$i18n.locale='en'
}
}
};
</script>
<style></style>
6.效果图
通过这一番操作我们间接的看下vuex和vue-router是如何进行配置的。
二.分析vue-router的配置
这是通过自定义配置的项目文件
1.在router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
分析代码文件:
(1)导入了Vue的实例化对象。
import Vue from 'vue'
(2)导入路由实例
import VueRouter from 'vue-router'
(3)注册
Vue.use(VueRouter)
(4)配置对于的路由
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
配置基地址
路由的模式
对于文件的路径
(5)导出
export default router
(2)挂载
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
三.Vuex
1.store/index.js 配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
2.main.js 挂载
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')