1. 安装jquery
   1. npm i jquery --save-dev
   2. 在vue.config.js文件中导入jquery如下:

   3. const webpack = require('webpack');
      module.exports={
          configureWebpack: {
              plugins: [
                  new webpack.ProvidePlugin({
                      $:"jquery",
                      jQuery:"jquery",
                      "windows.jQuery":"jquery"
                  })
              ]
          },
          productionSourceMap:false,
      }

      4. 创建一个jquery-vendor.js文件

      1. import $ from 'jquery';
         
         window.$ = $;
         
         window.jQuery = $;
         
         export default $;

          

      2. 创建之后如图：

2. jSignature下载 https://github.com/brinley/jSignature 地址

   1. 下载解压之后有个libs文件、找到jSignature.min.noconflict.js文件，复制到自己项目的libs文件中

   2. 在vue文件中导入文件

      import '../../libs/jquery-vendor.js';
      import '../../libs/jSignature.min.noconflict.js';

       

   3. 如图:
      1. 创建

         <div id="signature" class="signature"></div>

         5.初始化jSignature

         //在data中创建signature:null，
          mounted() {
            if (!this.signature){//判断是否已经初始化
                this.signature = $("#signature").jSignature(
                     {color:"#000",lineWidth: '4',width:534,height:350
                 });
               }
           },
         

         方法

         方法名称	使用方法	说明
         clear	.jSignature("clear")	清空并重置画布
         getData	.jSignature("getData", "base30")	将画布转换为base64编码的数据字符串，可以在表单发布或提交时将其保存为任何数据库中的字符串
         importData	.jSignature("importData",dataurl)	使用从上述getData方法提取的数据URL更新现有的jSignature画布

         选项参数

         参数名称	说明	默认值
         width	定义画布的宽度。 没有％或px的数值（新版是可以使用百分比和px后缀的）	250
         height	定义画布的高度。 没有％或px的数值（新版是可以使用百分比和px后缀的）	150
         color	定义画布上笔画的颜色。 接受任何颜色十六进制值	#000
         background-color	定义画布的背景颜色。 接受任何颜色十六进制值	#fff
         lineWidth	定义线的厚度。 接受任何正数值（也是默认画布的横线的画笔的宽度）	1

         cssclass

         定义画布的自定义css类

         None

                 

      2. 清空签名

          /**
           * 清空签名
           **/
           onReset(){
                 $("#signature").jSignature("reset");
            },

         7.判断是否已经签名

           if ($("#signature").jSignature('getData', 'native').length !== 0){
                     //获取已经签名的数据，格式为base64:
                    this.form.content = $("#signature").jSignature('getData', 'default');  
                 }
             }else{
                 alert('未绘制签名')
             }

         8.最终效果图:

         

可看jqeury演示：jQuery手写签名插件jSignature