vee-validate vue-i18n vue-meta vue-pathify webfontloader world-map-vue chartlist

min.js全局引入使用插件
vue项目中直接调用即可

1.vuetify

我们今天推荐的是一款国外的框架：Vuetify

官方网站：https://vuetifyjs.com/zh-Hans/


有中国的为什么还要用外国的？原因如下：

Vuetify几乎不需要任何CSS代码，而element-ui许多布局样式需要我们来编写

Vuetify从底层构建起来的语义化组件。简单易学，容易记住。

Vuetify基于Material Design（谷歌推出的多平台设计规范），更加美观，动画效果酷炫，且风格统

缺陷：

目前官网虽然有中文文档，但因为翻译问题，几乎不太能看。

使用步骤:

npm install vuetify
npm install sass@~1.32 sass-loader deepmerge -D

为 Vuetify 创建一个插件文件，src/plugins/vuetify.js内容如下：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

2.vee-validate

项目中的 Vue 需要使用表单验证
特点：
		基于模板的验证
		提供了许多开箱即用的验证规则
		一流的本地化支持
		可以验证 HTML5 input 输入框和自定义 Vue 组件
		自定义规则和错误消息

使用步骤

npm install vee-validate --save

//公用表单验证
import { ValidationObserver, ValidationProvider } from 'vee-validate';
import validate from './util/validate.js'
import axios from 'axios';
Vue.prototype.$axios = axios;

import QS from 'qs'
Vue.prototype.qs = QS;

表单验证详细介绍地址:
https://blog.csdn.net/beyond__devil/article/details/84956810

3.QS
之前用Vue+element写了一个后台管理系统，在登录时使用axios请求数据传参时无法正常的获取数据。之后也是一通百度，发现原因是传递参数要将参数序列化。
这里使用了qs插件：

简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

qs详细解析地址:
https://blog.csdn.net/weixin_43851769/article/details/86505164

validate.js

//公用表单验证规则
import { required, digits, email, max, regex } from 'vee-validate/dist/rules';
import { extend,  setInteractionMode } from 'vee-validate';
extend('required', {
  ...required,
  message: '{_field_}为必填字段'
});
extend('max', {
  ...max,
  message: '{_field_}字段不能超过{length}个字符',
})
extend('email', {
  ...email,
  message: '{_field_}字段必须为合法的邮箱地址',
})

4.vue-sweetalert2

sweetalert2弹窗插件:
可以封装公共组件引入使用

npm install sweetalert2@7.15.1 --save

vue-sweetalert2.js

import swal from 'sweetalert2'

export default {
  install: (Vue) => {
    // sweetalert2 的设置默认配置的方法
    swal.setDefaults({
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: 'rgb(140,212,245)',
      cancelButtonColor: 'rgb(193,193,193)'
    })

    // 添加全局方法
    Vue.swal = swal
    // 添加实例方法
    Vue.prototype.$swal = swal
  }
}

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
const options = {
  confirmButtonColor: '#00aaff',
  cancelButtonColor: '#ff7674',
};
Vue.use(VueSweetalert2,options);

new Vue({
  router,
  vuetify,
  store,
  i18n,
  render: h => h(App),

  ValidationProvider,
  ValidationObserver,
}).$mount('#app')

sweetalert2详细地址:
https://www.cnblogs.com/yangguoe/p/9316624.html

4. vue-i18n

import i18n from './i18n'

new Vue({
  router,
  vuetify,
  store,
  i18n,
  render: h => h(App),

  ValidationProvider,
  ValidationObserver,
}).$mount('#app')

详细j推荐地址:
https://www.jianshu.com/p/ea93efef5155
https://www.cnblogs.com/rogerwu/p/7744476.html