这是我参与「第四届青训营 」笔记创作活动的第十五天
1. 在main.js中测试组件myComps时，警告提示 export 'default' (imported as 'Vue') was not found in 'vue'
源代码：
import Vue from 'vue'
import App from './App.vue'
import myComps from './components/index'
Vue.config.productionTip=false
Vue.use(myComps)
new Vue({
render: h=> h(App),
}).$mount('#app')
原因：
安装的vue-cli为v4以上的版本，其不包含全局的 Vue，Vue 被 createApp 函数代替
解决方法：
Vue 改为createApp(App)
修改后：
import { createApp } from 'vue'
import App from './App.vue'
import myComps from './components/index'
createApp(app).config.productionTip=false
createApp(app).use(myComps)
createApp(App).mount('#app')
2. vue3.x debugger失效
解决方法 ：
在package.json中，browserslist": []前增加
"rules": {
"no-debugger": "off",
"no-console": "off",
"generator-star-spacing": "off",
"no-tabs": "off",
"no-unused-vars": "off",
"no-irregular-whitespace": "off"
}
有效
又出现：
先f12打开控制台，再实现debugger动作
最后：不添加上述规则，在进行debugger动作前先打开控制台就能实现debugger功能
3. console反复报错WebSocketClient.js?5586:16
报错信息：
WebSocket connection to 'ws://192.168.244.90:8080/ws' failed:
WebSocketClient @ WebSocketClient.js?5586:16
解决方法：
修改vue.config.js主机号或端口号
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
host: '128.0.0.1',
port: 8080,
client: {
webSocketURL: 'ws://192.168.0.103:8080/ws',
},
headers: {
'Access-Control-Allow-Origin': '*',
}
}
})
有效
又出现：
改端口到127.0.0.1
4. 拖拉组件到中间画布时不显示组件并控制台报错Uncaught TypeError: JSON.stringfy is not a function
报错信息：
Uncaught TypeError: JSON.stringfy is not a function
at Object.handle [as textComp] (textComps.js?c340:33:1)
at getComponent (index.js?3777:10:1)
at Proxy.drop (centerViews.vue?8776:59:1)
at onDrop._cache.<computed>._cache.<computed> (centerViews.vue?8776:3:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
at HTMLDivElement.invoker (runtime-dom.esm-bundler.js?2725:369:1)
问题：
templates里的textComp中stringify少了i
改正后：
let template=`<textComp ${getAttrStr(attribute)} data='${JSON.stringify(data)}'></textComp>`
4.2 依旧不能实现拖拽效果报错Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.createApp is not a constructor
报错信息：
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.createApp is not a constructor
问题：
vue版本问题，不能vue3.0项目
解决方法：
重新创建vue2.0项目
4.3 依旧不能实现拖拽效果，甚至白屏
原因：
在vue2.0版本中不能使用createApp(App)
解决方法：
将 createApp(App) 改回 Vue
5. vscode中<template>有波浪线，vscode报错
报错信息：
TypeScript intellisense is disabled on template. To enable, configure `"jsx": "preserve"` in the `"c......
解决方法：
在jsconfig.json中添加
"jsx": "preserve"
结果：
使用后会导致其他功能无法实现，弃用
6. 补充：代码对齐 shift+alt+f
7. clone项目报错
F:\>git clone https://github.com/xxxxxx.git
Cloning into 'xxxxxx'...
remote: Enumerating objects: 96, done.
remote: Counting objects: 100% (96/96), done.
remote: Compressing objects: 100% (62/62), done.
error: RPC failed; curl 56 OpenSSL SSL_read: Connection was reset, errno 10054
error: 3337 bytes of body are still expected
fetch-pack: unexpected disconnect while reading sideband packet
fatal: early EOF
fatal: fetch-pack: invalid index-pack output
原因：
未初始化git
解决方法：
-
初始化git（最重要，不初始化后续步骤无法实现）
git init -
修改 git 提交文件大小上限
git config http.postBuffer 524288000 -
让git忽略ssl证书错误（不知道啥意思）
git config --global http.sslVerify "false" -
克隆项目
git clone [git链接] --depth 1
8. clone项目警告
报错信息：
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
解决方法：
升级npm并重新install项目
npm -v //查看当前版本
npm install -g npm //升级
结果：
无效
原因：
pull下来的项目文件中包含团队上传的yarn.js文件（应该是这个名字），我用的是npm，两者冲突。
解决方法：
删除yarn.js文件并重新install文件。
9. 在pull拉取远程仓库时，git 报错 error: The following untracked working tree files would be overwritten by checkout: src/asse
原因：
本地修改代码后未进行add或commit操作
解决方法：
git add .将所有更改过的文件全部上传到暂缓区
或
add + git commit -m "提交信息"将暂缓区的文件上传到本地仓库
注意：
一定要先add或commit新的代码，不然会被全覆盖掉 血的教训
千万不要听别人的博客git clean -d -fx 这会删掉你辛辛苦苦敲的代码 QAQ
