之前已经写过相关NPM的文章，这次算是补齐了一个系列的了。

这个系列的顺序：NPM组件搭建(本篇) ---> 本地开发调试NPM包 ---> 在NPM上发布组件教程 ---> GitHub Action终章之发布NPM

创建项目

这里我们直接利用@vue/cli来生成项目。因为是组件，所以路由和状态管理都不用了，生成的目录如下：

├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── components
│ ├── App.vue
│ └── main.js
├── babel.config.js
├── package.json
└── README.md

编写组件

我们将index.vue置于src/components目录下，同时在该目录下新建一个index.js文件，用来注册Vue组件。
index.vue：

<template>
  <div>demoComponents</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 组件名称 from '组件路径';
export default {
  name: 'demoComponents',
  //引入组件
  props: {},
  //引入混淆
  mixins: [],
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期 - 创建之前
  beforeCreate() {},
  //生命周期 - 挂载之前
  beforeMount() {},
  //生命周期 - 更新之前
  beforeUpdate() {},
  //生命周期 - 更新之后
  updated() {},
  //生命周期 - 销毁之前
  beforeDestroy() {},
  //生命周期 - 销毁完成
  destroyed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>

<style lang='scss'>
div{
  text-align: center;
}
</style>

index.js：

import demoComponents from './index.vue'

demoComponents.install = function (Vue) {
  Vue.component(demoComponents.name, demoComponents)
}

if (typeof window !== 'undefined' && window.Vue) {
  window.demoComponents = demoComponents;
  window.Vue.use(demoComponents);
}

export default demoComponents

在APP.vue中，引用组件

<template>
  <div id="app">
    <demo-components />
  </div>
</template>

<script>
import demoComponents from './components/index.js';

export default {
  name: 'App',
  components: {
    demoComponents,
  },
  data() {
    return {};
  },
};
</script>

打包

接下来，我们需要对这个组件进行打包。这里我们可以使用@vue/cli 3.0自带的打包功能。打开package.json文件，在scripts中增加一项：

"scripts": {
  "package": "vue-cli-service build --target lib --name demo ./src/components/index.js",
},

然后执行，会生成：

├── demo.html
├── demo.common.js
├── demo.common.js.map
├── demo.css
├── demo.umd.js
├── demo.umd.js.map
├── demo.umd.min.js
└── demo.umd.min.js.map

接下来，需要将package.json中指向刚刚生成的库文件。

"main": "dist/demo.common.js",
"browser": "dist/demo.umd.js",
"style": "dist/demo.css",

附上整体的package.json：

{
  "name": "demo",
  "description": "A demo component for Vue.js",
  "version": "1.0.0",
  "author": "wangdaodao <hi@wangdaodao.com>",
  "license": "MIT",
  "private": false,
  "main": "dist/demo.common.js",
  "browser": "dist/demo.umd.js",
  "style": "dist/demo.css",
  "keywords": [
    "demo",
    "vue"
  ],
  "files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ],
  "scripts": {
    "package": "vue-cli-service build --target lib --name demo ./src/components/index.js",
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@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",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

整体代码，我提交到了GitHub上，可以下载下来直接使用：

Owner：

Updated：1970-01-01 08:00

Watch：

Star：

Fork：

发布

可以看之前在NPM上发布组件教程，这里有详细的发布教程。

使用

import xxx from 'xxx'
Vue.use(xxx)

# 或者

<script src='https://unpkg.com/xxx/dist/xxx.umd.js'></script>