一、vue-i18n
vue-i18n是一个使项目实现国际化的插件，很多UI组件库也提供了多种语言包供导入使用。
使用步骤
1、安装
npm install vue-i18n --save-dev
2、在src下新建language文件夹，用于放置不同语种的变量与语言的映射关系，组件库的语言包也可以导入到文件中。（以中文为例如下）
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 导入组件库语言包
const zh={// 自定义关键词
message:{
'login':'登录',
'log_out':'退出',
'username':'用户名',
'background_management_system':'后台管理系统',
...zhLocale
}
}
export default zh
3、在language文件夹下新建index.js，将不同语言导入并生成message对象
import en from './en'
import zh from './zh-ch'
const message={
'en':en,
'zh':zh
}
export default message
4、在main.js中引入vue-i18n并挂载到Vue实例，构建vue-i18n实例并添加语言标识和映射
Vue.use(VueI18n)
const i18n=new VueI18n({
locale: window.localStorage.getItem('lang')=='zh'?'zh':'en',// 语言标识
messages
})
Vue.use(Element, {// 在注册Element时设置i18n的处理方法
i18n: (key, value) => i18n.t(key, value)
})
5、使用
- html中：{{$t('message.username')}}
- JS中：$t('message.username')
- 切换语言时，可通过localStorage保存到浏览器
switchLang(){
this.$i18n.locale=this.$i18n.locale=='zh'?'en':'zh';
window.localStorage.setItem("lang",this.$i18n.locale);
}
二、icon
阿里巴巴矢量图网提供了大量免费的矢量图，可以选择图标的颜色和大小，通过svg、png、svg元素等形式应用在项目中。
使用步骤
1、创建SvgIcon组件,对调用时传入的iconClass、className进行计算处理并返回最终得到样式
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
}
2、在main.js中将SvgIcon组件注册为全局组件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
Vue.component('svg-icon', SvgIcon)
3、在src新建icon文件夹,icon下新建svg文件夹，里面放置项目使用的svg图片。
<svg-icon icon-class="user" />
改造
1、目前所有的 svg-sprite 都是通过 iconfont 的 iconfont.js 生成的，是一段用js来生成svg的代码，所有图标 icon 都很不直观。
因此，使用 webpack 的 exclude 和 include ，让svg-sprite-loader只处理你指定文件夹下面的 svg，url-loaer只处理除此文件夹之外的所以 svg。
2、自动导入
创建一个专门放置图标 icon 的文件夹如：@/src/icons，使用 webpack 的 require.context。
require.context("./test", false, /.test.js$/):在 test 文件夹（不包含子目录）下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。即通过正则匹配引入相应的文件模块。
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
三、vue-count-to
一个简单好用的数字滚动插件,可以设置 startVal 和 endVal等参数，它会自动判断计数或倒计时。支持vue-ssr。
使用步骤
1、安装依赖
npm install vue-count-to
2、在Vue组件使用
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data () {
return {
startVal: 0,
endVal: 2017
}
}
}
</script>
- 参数列表
- 函数列表
四、mockjs 与 easy-mock
前端用来模拟请求与返回数据的解决方案。
-
mock：基于webpack-dev-serve实现，在启动前端服务时，mock-server就会自动启动；另外还通过 chokidar 来观察 mock 文件夹内容的变化。在发生变化时会清除之前注册的mock-api接口，重新动态挂载新的接口，从而支持热更新。
-
easy-mock：纯前端可视化，并且能快速生成模拟数据的持久化服务。
使用步骤
1、安装Mockjs
npm install mockjs
2、在根目录建立mock文件夹，放置index.js（mock入口，可以导入模块）和mock-server.js（启动mock-serve）两个文件
3、在vue.config.js编写请求代理
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:${port}/mock`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
after: require('./mock/mock-server.js')
4、本地 Mock 数据与线上数据切换：通过环境变量实现不同环境下，请求不同的 api 地址。
# .env.development
VUE_APP_BASE_API = '/dev-api' #注入本地 api 的根路径
# .env.production
VUE_APP_BASE_API = '/prod-api' #注入线上 api 的根路径
// 根据环境变量创建axios实例，让它具有不同的baseURL
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 5000 // request timeout
})
mockjs 常用语法
1、数据模板定义
- 'name|min-max': number （返回min-max任意一位数字）
- 'name|min-max.dmin-dmax': number （返回min-max任意一位数字，小数位数dmin-dmax位）
- 'name|1': boolean （返回布尔值）
- 'name|1': array （返回数组中任意一个元素）
- 'name|+1': array （按顺序返回数组中一个元素）
- 'name': regexp （根据正则表达式返回）
2、数据占位符定义
-
布尔值：Mock.mock('@boolean')
-
整数：Mock.mock('@integer')
一定范围内的整数：Mock.mock('@integer(min, max)') -
浮点数： Mock.mock('@float')
一定范围内，一定小数位数的浮点数： Mock.mock('@float(60, 100, 3, 5)') -
字符串 ：Mock.mock('@string')
一定长度的字符串：Mock.mock('@string(5)')
小写字符串： Mock.mock('@string("lower", 5)')大写字符串： Mock.mock('@string("upper", 5)')
数值字符串：Mock.mock('@string("number", 5)')
标识符字符串：Mock.mock('@string("symbol", 5)')
规定字符范围的字符串：Mock.mock('@string("aeiou", 5)')
-
时间：Mock.mock('@datetime("yyyy-MM-dd A HH:mm:ss")')
