关于开发Vue小白，一些报错的解决办法

一、控制台报错：Component name “My“ should always be multi-word vue/multi-word-component-names。

大概意思组件命名不符合vue的规范，解决方法如下：

方法1：找到vue.config.js文件，在末尾加入这一行代码 lintOnSave: false即可，意思大概是关闭组件名字的检查

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({

  transpileDependencies: true,

  lintOnSave: false

});

方法2：使用驼峰式对组件命名。

二、出现这种错误：'arr_data' is already defined no-redeclare。

解决：命名变量不要出现2次，在不同的方法中。

三、Edge执行Vue跨域访问时：出现控制台报错Unchecked runtime.lastError: The message port closed before a response was received.这是浏览器扩展插件出了问题，要想解决这个bug最有效的方法就是在已安装的扩展里删除迅雷扩展插件，删完bug立马没了。

四、在下载moment插件时，出现安装失败，错误提醒如下：

        npm i moment

        npm ERR! code ERESOLVE

        npm ERR! ERESOLVE unable to resolve dependency tree

百度翻译了一下：

        npm错误！代码解析

        npm错误！ERESOLVE无法解析依赖关系树

查阅相关资料后说原因是：安装的包与已经存在的包有冲突。

解决方法：

使用npm install xxx -- force或者npm install xxx --legacy-peer-deps来安装。

（1）安装时间格式化插件

npm install vue-moment --save

（2）在main.js中引用

import moment from 'moment'

Vue.use(require('vue-moment'));

Vue.prototype.moment = moment

（3）在main.js中加入日期格式化的过滤器，其中YMDHMSFormat为方法名称：

Vue.filter('YMDHMSFormat',function(Str,pattern='YYYY-MM-DD HH:mm:ss'){

   return moment(Str).format(pattern);

})

(4)普通使用方法，datestr为参数名，后面YMDHMSFormat为方法名称：

        <p>{{datestr | YMDHMSFormat}}</p>

但是，在table中需要添加插槽

不加格式化写法：

        <el-table-column prop="date" label="时间"></el-table-column>

加入格式化写法：

        <el-table-column prop="date" label="时间">

            <template slot-scope="scope">{{scope.row.date| YMDHMSFormat}}</template>

        </el-table-column>