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

2022-01-25 13:31:39 阅读：182 来源： 互联网

标签：插件 vue 项目 Vue vuetify import validate sweetalert2

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

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

标签：插件,vue,项目,Vue,vuetify,import,validate,sweetalert2
来源： https://blog.csdn.net/weixin_46409887/article/details/122680856

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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