利用vue/cli先创建项目

新建component, 并且可以在其他页面中引入，查看组件是否正常

  1. <template>
  2. <div>
  3.   <h1>vue-com-test</h1>
  4.   </div>
  5. </template>
  7. <script>
  8.   export default {
  9.     name: 'vueComTestAlvin'
  10.   }
  11. </script>
  13. <style lang="scss" scoped>
  15. </style>

创建install.js文件

  1. // install.js
  2. import vueComTestAlvin from './components/vueComTestAlvin'
  4. export default {
  5.   install: (Vue) => {
  6.     Vue.component('vue-com-test-alvin', vueComTestAlvin)
  7.   }
  8. }

修改package.json

  1. {
  2.   "name": "vue-com-test-alvin",
  3.   "version": "0.1.3",
  4.   "main": "dist/vue-com-test-alvin.common.js", // 组件引入的入口
  5.   "files": ["dist/"], // 发布到npm时的文件
  6.   "scripts": {
  7.     // 打包
  8.     "build-library": "vue-cli-service build --target lib --name vue-com-test-alvin ./src/install.js",
  9.     "dev": "vue-cli-service serve",
  10.     "build": "vue-cli-service build",
  11.     "lint": "vue-cli-service lint"
  12.   },
  13.   "dependencies": {
  14.     "core-js": "^3.6.5",
  15.     "vue": "^2.6.11"
  16.   },
  17.   "devDependencies": {
  18.     "@vue/cli-plugin-babel": "~4.5.11",
  19.     "@vue/cli-plugin-eslint": "~4.5.11",
  20.     "@vue/cli-service": "~4.5.11",
  21.     "@vue/eslint-config-standard": "^5.1.2",
  22.     "babel-eslint": "^10.1.0",
  23.     "eslint": "^6.7.2",
  24.     "eslint-plugin-import": "^2.20.2",
  25.     "eslint-plugin-node": "^11.1.0",
  26.     "eslint-plugin-promise": "^4.2.1",
  27.     "eslint-plugin-standard": "^4.0.0",
  28.     "eslint-plugin-vue": "^6.2.2",
  29.     "lint-staged": "^9.5.0",
  30.     "vue-template-compiler": "^2.6.11"
  31.   },
  32.   "browserslist": [
  33.     "> 1%",
  34.     "last 2 versions",
  35.     "not dead"
  36.   ],
  37.   "gitHooks": {
  38.     "pre-commit": "lint-staged"
  39.   },
  40.   "lint-staged": {
  41.     "*.{js,jsx,vue}": [
  42.       "vue-cli-service lint",
  43.       "git add"
  44.     ]
  45.   }
  46. }

发布

npm publish

更新

npm publish

使用

  1. /*
  2. 1. 先安装 npm  i vue-com-test-alvin -S
  3. 2. 在main.js中引入
  4. // main.js
  5. import vueComTestAlvin from 'vue-com-test-alvin'
  6. Vue.use(vueComTestAlvin)
  7. 3. 在其他组件中使用即可
  8. */