NPM组件搭建

之前已经写过相关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上,可以下载下来直接使用:

NPM组件搭建
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>

添加新评论