nuxt2+vue2+antdesignVue1.7.8(四)

    在nuxt 中使用vue-cropper，官网地址vue-cropper - npm (npmjs.com)​​​​​​https://www.npmjs.com/package/vue-cropper

之前的项目是使用的一个模板，使用的是vue3版本封装的一个组件支持上传图片的剪切，主要用到的就是 vue-cropper。这次SEO优化使用的是vue2且在nuxt上使用，官网对这块有段文档描述，主要是在vue2中的一些方法的使用都有this.$refs.cropper示例，对于使用很便利。

描述一下在使用中遇到的坑。

首先直接使用官网中对于组件的引用，用的是require,直接报错，由于之前使用过其他的第三方插件，知道都是在plugins下创建JS文件，使用Vueuse()来使用，在nuxt.config.js中在plugins引入，书写的话建议是{src:'xxx",ssr:false}这样的方式避免服务端加载报错。

引入之后打开上传然后展示部分只有宽，没有高度，只好在VueCropper组件上写一个内联样式的高度，这样打开之后再上传就没有毛病了。

低版本UI居然没有 a-image 标签 因此只能img代替减少了预览的功能。。。。

在nuext中使用day.js。在nuxtconfig.js在中设置。在modules中配置

modules: [
    '@nuxtjs/style-resources',
    '@nuxtjs/axios',
    '@nuxtjs/dayjs'
  ],

 dayjs: {
    locales: ['en'],
    defaultLocale: 'en',
    plugins: ['relativeTime', 'advancedFormat'],
},

使用的时候this.$day()是获取的当前时间，this.$dayjs(createTime).add(dueryTime, "day");计算多少天之后的时间。 

配置主题色

很多时候使用的UI主题色老板不喜欢或者UI不喜欢。在nuxt使用配置主题色覆盖原有主题色，我是这么做的。

首先跟这个文章一样Nuxt.js 按需引入组件库 、修改主题颜色（定制主题）与Less安装遇到的问题 - 闹一腾 - 博客园 (cnblogs.com)

进行一通的配置原本以为可以生效，结果丝毫不见反应。经过苦心寻找终于发现了另外一篇 

nuxt.js 使用ant-design-vue 自定义主题配置及错误处理及@vue/cli 4.5.13中nuxt.js警告问题【2021-8-6】_一定引入less文件否则自定义颜色不生效!!!-CSDN博客 

这篇文章的第一个方法也是上述文章那样，直接跳过选择了第二个。自己自定义一个全局变量的less style，在其中引入antdesignvue的变量文件，用自己的覆盖掉，这里尤其注意的就是文章里的一句话在css配置的时候引入的是自己自定义的文件，不能再引入 antdesignvue的样式了，不然依然是不生效。

 css: [
    '@/assets/style/default.less',
    // 'ant-design-vue/dist/antd.css',
    '@/assets/style/base.less',
    '@/assets/style/common.less',
    'ant-design-vue/lib/icon/style/css',
    'animate.css/animate.css'

  ],