web front end: Vue cli3 library mode to build the component library and publish npm

web front end: Vue cli3 library mode to build the component library and publish npm

0.4322019.05.31 15:46:10 read 535 words 933

Create a project

In the specified directory using the command creates a default project, or their choice according to their needs.
$ vue create .

Adjust directory

We need a directory to store component, a directory for example, the directory transformation in the following manner.

.
...
|-- examples // 原 src 目录，改成 examples 用作示例展示
|-- packages // 新增 packages 用于编写存放组件
...
.

image.png

Configuring the Project to support the new directory structure

We step on the transformation of the catalog will encounter two problems.
1, src directory renamed as examples, leading to the project can not run
2, the new packages directory, which did not join webpack compiled
Note: cli3 provides an optional vue.config.js profile. If this file exists then he will be loaded automatically, all the configuration of the project and webpack, have in this file.

• Reconfiguring the entrance, modify configuration options pages
  new version of Vue CLI support for building applications using more than one page of pages of options vue.config.js.
  As used herein, the inlet to the modified examples pages

module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  }
}

• Support for handling packages directory, modify chainWebpack options configuration
  packages are our new directory, the default is not webpack processed, so you need to add support for the configuration directory.
  chainWebpack is a function that receives a ChainableConfig example webpack-chain based. It allows modification to the configuration of the internal webpack more granular.

module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages/')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
};

Writing components

image.png

 

As shown, demo-component is a component. Each component must create a new folder, and then add index.js src folder.

// demo-component.vue
<template>
    <div>
        这是demo-component.vue
    </div>
</template>
<script>
export default {
    name: 'demoComponent'
}
</script>

// src/index.js
// 导入组件，组件必须声明 name
import demoComponent from './src/demo-component'

// 为组件提供 install 安装方法，供按需引入
demoComponent.install = function (Vue) {
 Vue.component(demoComponent.name, demoComponent)
}
// 默认导出组件
export default demoComponent

All components of export packages

New index.js in the packages folder

// 导入颜色选择器组件
import demoComponent from "./demo-component/index.js";

// 存储组件列表
const components = [demoComponent];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
  // 判断是否安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component)
  });
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  demoComponent
};

The introduction of the components in the project

// main.js

// 导入组件库
import demo from '../packages/index';
// 注册组件库
Vue.use(demo);

Use Vue.use () after global registration, can be used directly in any of the pages, without additional introduction. Of course, it may also be incorporated as needed.

// Home.vue

<demo-component></demo-component>

npm run serveYou can see the results after execution.

Publish to npm, referencing directly in the project

1, package.js compiled as a library in a new command

In the library mode, the Vue is external, which means that even if the introduction of the Vue code, files package also does not include the Vue.
Vue Cli3 build target: library
Below we add a command npm run lib in scripts in

• --target: build target, the default mode for the application. Here modify mode is enabled library lib.
• --dest: output directory, the default dist. Here we changed lib
• [Entry]: The last parameter is a file entry, default src / App.vue. Here we specify compiler packages / component library catalog.

"script": {
 // ...
 "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}

Compile library commands
$ npm run lib

image.png

 

2, the configuration file posted to package.json npm field

name
version
description
main
keyword
author
private
license

The following set as a reference

{
 "name": "vcolorpicker",
 "version": "0.1.5",
 "description": "基于 Vue 的颜色选择器",
 "main": "lib/vcolorpicker.umd.min.js",
 "keyword": "vcolorpicker colorpicker color-picker",
 "private": false
 }

3, add .npmignore files, set to ignore publish documents
we publish to the npm, after only compiled lib directory, package.json, README.md is to be released. So we need to set to ignore directories and files.
And  .gitignore the same syntax, specifically what documents need to be submitted, to see their actual situation.

# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

4, log on to npm
first need to register an account on npm, register here.
If you configure Taobao Mirror, Mirror npm first set back:

$ npm config set registry http://registry.npmjs.org

Then execute the command in a terminal login, enter your user name, password, email to sign in.
$ npm login

5, to publish npm
execution issued an order to release components npm
$ npm publish
display can be released after the successful implementation of the package npm find their official website, if no release is successful, there may be other packages package name and community repeated, namely a change of name can.