Vue整合

1.Vue整合i18n

1-1.引用

npm install vue-i18n@8void

1-2.main.js引用

import VueI18n from 'vue-i18n' 
import i18n from './components/i18n/index' \\ 引用i18n main.js

Vue.use(VueI18n)
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

\\ i18n main.js 
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () { \\ 获取i18n的json文件存放地址
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'cn',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'cn',
  messages: loadLocaleMessages()
})

1-3.json文件格式实例

{
  "index": {
    "title": "姜小翰博客",
    "home": "主页",
    "blog": "博客",
    "about": "关于"
  },
  "welcome": {
    "welcome": "浏览量+1",
    "docs": "这是姜小翰的博客，你在这里目前啥都干不了。只是个模版->欢迎各位大佬求教",
    "next": "前端小菜鸡学vue"
  }
}

1-4.vue引用i18n

获取i18n值切换语言

<select class="custom-select" v-model="$i18n.locale">
	<option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">
		{{ lang }}
	</option>
</select>

i18n引用方式：$t('value1.value2')

2.vue整合bootstrap-vue

2-1.引用

npm install vue bootstrap-vue bootstrap
 \\ 注：bootstrap更新到最新的5.0版本，该项目只支持4.0版本

2-2.main.js引用

import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

\\ 引入bs的css文件
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

2-3.vue引用bsv

建议参考中文官方文档

BootstrapVue中文官方文档

3.vue整合MarkDown

3-1.引用

npm install editor.md
注：本来想引用之前用过的Editor.md,后来发现了一个好东西
npm install mavon-editor --save

3-2.main.js引用

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'


Vue.use(mavonEditor)

末言

前端小辣鸡某某学习vue，做得不好请各位带佬多多批评。2月6号，今天准备
整合下Editor.md，怕忘了整了这篇文章。
上述代码可以参考下述gitee项目地址

gitee项目地址