npm是第三方维护的包管理工具，上面有很多的开源模块
1.发布到npm
npm的发布，它所依赖的配置是package.js这个文件,添加一些发布npm的信息

  1. {
  2.   "name": "yup-ui",
  3.   "version": "0.1.0",
  4.   "description": "慕课网演示组件库-学习",//组件库描述
  5.   "main": "dist/index.umd.js", // 入口文件
  6.   "keywords": [ //搜索关键字
  7.     "yup-ui"
  8.   ],
  9.   "author":"zack", //作者信息
  10.   "files": [//指定需要发布的文件
  11.     "dist",
  12.     "components"//方便使用者查看源码
  13.   ],
  14.   "scripts": {
  15.     "serve": "vue-cli-service serve",
  16.     "build": "vue-cli-service build",
  17.     "build:": "npm run build:js && npm run build:css",
  18.     "lint": "vue-cli-service lint",
  19.     "build:js": "webpack --config ./webpack.component.js",
  20.     "build:css": "npx gulp sass"
  21.   },
  22.   "dependencies": {
  23.     "core-js": "^3.6.5",
  24.     "node-sass": "^4.14.1",
  25.     "sass-loader": "^7.3.1",
  26.     "vue": "^2.6.11"
  27.   },
  28.   "devDependencies": {
  29.     "@vue/cli-plugin-babel": "~4.5.3",
  30.     "@vue/cli-plugin-eslint": "~4.5.3",
  31.     "@vue/cli-service": "~4.5.3",
  32.     "babel-eslint": "^10.1.0",
  33.     "eslint": "^6.7.2",
  34.     "eslint-plugin-vue": "^6.2.2",
  35.     "vue-template-compiler": "^2.6.11",
  36.     "vue-loader": "^15.9.8",
  37.     "webpack": "^4.46.0",
  38.     "webpack-cli": "^4.9.2"
  39.   },
  40.   "eslintConfig": {
  41.     "root": true,
  42.     "env": {
  43.       "node": true
  44.     },
  45.     "extends": [
  46.       "plugin:vue/essential",
  47.       "eslint:recommended"
  48.     ],
  49.     "parserOptions": {
  50.       "parser": "babel-eslint"
  51.     },
  52.     "rules": {}
  53.   },
  54.   "browserslist": [
  55.     "> 1%",
  56.     "last 2 versions",
  57.     "not dead"
  58.   ]
  59. }

npm组件发布平台使用的描述是项目的.md文件

  1. <!-- npm组件发布平台使用的描述是项目的.md文件 -->
  2. # mooc-ui 组件库
  4. ### 快速开始
  6. ```bash
  7. npm i yup-ui

2.引用组件库

  1. // 全部引入
  2. import 'yup-ui/dist/css/index.css';
  3. import YUI from 'yup-ui';
  4. Vue.use(YUI);
  6. //按需引用
  7. import 'yup-ui/dist/css/demo.css';
  8. import {Demo} from 'yup-ui';
  9. Vue.use(Demo);

``` 发布npm

  • npm login登录
  • 输入账号密码邮箱
  • npm publish

2.测试发布后的组件库
npm i yup-ui 存在一些问题？？未解决
可能存在版本关联的问题