关于《从零开始撸一个 Vue 组件库》这个项目的一些笔记

b站视频链接：从零开始撸一个 Vue 组件库，搬砖效率提升404倍！_哔哩哔哩_bilibili

在做这个项目的时候遇到了一点问题，通过自己上网查阅资料并解决，以下是一些个人经验笔记。

1、在跑的时候报错，解决error ‘XXX‘ is not defined no-undef且项目没有eslintrc.js文件问题

这是因为eslint的语法校验导致的问题，文件是通过public的index.html中<script src="xxxxxx.js"></script>引入的，没有定义全局变量，项目没有eslintrc.js文件，但是可以在package.json中配置eslint规则

在package.json文件中找到eslintConfig，并配置rules，新增

"vue/multi-word-component-names": "off"

并重新npm i，即可跑通项目。

图示：

2、在跑的时候又突然报错了

需要更改其配置：

代码为：

"@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^6.8.1",
    "del": "^6.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "gulp": "^4.0.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^4.1.0",
    "node-sass": "^5.0.0",
    "sass-loader": "^5.0.0",
    "style-loader": "^3.3.3",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.11",
    "vuepress": "^1.8.2",
    "webpack-cli": "^4.5.0"

并把原来的依赖和package-lock.json这两个东西删掉：

再重新安装依赖

无法npm i时，尝试更换镜像

//查看当前镜像

npm get registry 

//设置淘宝镜像

npm config set registry http://registry.npm.taobao.org

//如果你换成淘宝镜像的话，会影响你发布模块，这时候需要换回npm官网的镜像
 

npm config set registry https://registry.npmjs.org

镜像源是npm的发布不了，换成淘宝的可以发布，但是在packages没看到

需要更换名字，npm上传同名不行

这里就换了自定义的命名上传了，

3、后续npm i -D vuepress时候无法下载，再切换镜像源试一下就能解决了

后续npm i -D vuepress时候无法下载，再切换镜像源试一下

最后在github新建站点，并上传

GitHub仓库地址: GitHub - Wiser714/moocUI: 慕课网组件库

个人站点地址：Wiser714.github.io | 个人站点仓库

 NPM官网下载的地址： mooc-ui-wiser - npm

 源码可自取