vue项目各种第三方插件在项目中的使用,总结一下。

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

  1. 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

上一篇:MT【59】一道迭代函数作图


下一篇:基于Unity的AR开发初探:第一个AR应用程序