The vue-cli3.0 development component is released to npm

1. Adjust the project structure

First create a default project with vue-cli

The current project directory is as follows:

first, you need to create a packagesdirectory to store components,
and then change the src directory to examplesas an example. The entry file in examples is the same as the entry file under src.

Two, modify the configuration

When starting the project, the default entry file is src/main.js

After changing the src directory to examples, you need to reconfigure the entry file

vue.config.jsCreate a file in the root directory

copy code

// vue.config.js

module.exports = {
    
    
  // 将 examples 目录添加为新的页面
  pages: {
    
    
    index: {
    
    
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

Copy the code
After completing this step, you can start the project normally

vue-cli 3.x provides commands to build libraries , so there is no need to configure webpack for the packages directory

3. Development components

A packages directory has been created before to store components

This directory stores a separate development directory for each component, integrates all components with an index.js, and exports them externally

Each component should be classified under a separate directory, including its component source code directory src, and index.js for external reference

Here we take the textarea component as an example. The complete packages directory structure is as follows:

textarea/src/main.vueit is the development file of the component, and the specific code will not be shown here

It should be noted that the component must declare the name, which is the label of the component

textarea/index.jsIt is used to export a single component. If you want to import it on demand, you also need to configure it here

// packages/textarea/index.js

// 导入组件，组件必须声明 name
import Textarea from './src/main.vue'

// 为组件添加 install 方法，用于按需引入
Textarea.install = function (Vue) {
    
    
    Vue.component(Textarea.name, Textarea)
}

export default Textarea

4. Integrate and export components

Edit packages/index.jsthe file to achieve global registration of components

// packages / index.js

// 导入单个组件
import Textarea from './textarea/index'

// 以数组的结构保存组件，便于遍历
const components = [
    Textarea
]

// 定义 install 方法
const install = function (Vue) {
    
    
    if (install.installed) return
    install.installed = true
    // 遍历并注册全局组件
    components.map(component => {
    
    
        Vue.component(component.name, component)
    })
}

if (typeof window !== 'undefined' && window.Vue) {
    
    
    install(window.Vue)
}

export default {
    
    
    // 导出的对象必须具备一个 install 方法
    install,
    // 组件列表
    ...components
}

The component has been developed here

This component can be introduced in examples/main.js

import TagTextarea from '../packages/index'
Vue.use(TagTextarea)

Then you can directly use the textarea component you just developed

The label of the component is the name defined in the component

At this time, you can start the project with npm run serve to test whether the component has bugs

// Before starting, you need to make sure that a new entry examples/main.js has been added to vue.config.js

5. Packaging components

vue-cli 3.x provides a library file packaging command

Mainly four parameters are required:

1. target : The default is to build the application, change it libto enable the build library mode

2. name : output file name

3. dest : output directory, the default is dist, here we change it tolib

4. entry : The entry file path, the default is src/App.vue, here it is changed topackages/index.js

libBased on this, add a command to scripts in package.json

// pageage.json

{
    
    
  "scripts": {
    
    
    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"
  }
}

Then execute npm run libthe command to compile the component

6. Prepare to publish

First you need to package.jsonadd component information

name : package name, the name cannot conflict with existing names;

version : version number, which cannot be the same as the historical version number;

description : Introduction;

main : the entry file, which should point to the compiled package file;

keyword : keywords, separated by spaces;

author : author;

private : Whether it is private or not, it needs to be changed to false to publish to npm;

license : Open source agreement.

As shown below

Then create .npmignorea file and set the ignore file

The syntax of this file is the same as that of .gitignore, setting which directories or files to ignore when publishing to npm

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

7. Publish to npm

If you have changed the mirror address of npm before, such as using Taobao mirror, change it back first

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

If you do not have an npm account, you can npm addusercreate an account through the command, or register on the npm official website

If you have an account registered on the official website, or have an account before, use npm loginthe command to log in

Before publishing, make sure that the component has been compiled and the path of the entry file (main) in package.json is correct

Everything is in place, publish the component:

npm publish

Published successfully ^ _ ^

Eight, here is the code when I test, develop and release:

It is enough to try the first seven steps for the first time . The following is to add an input component on the basis of textarea.

代码Gitee:
https://gitee.com/ljypgn/vue-cli3-released-to-npm-demo.git

Project structure:

through npm install ljy-public-componentthe installation, the actual effect is as follows:

I am the display effect of the component as the textarea component, and the display effect of the input component as LJY below , corresponding to the and folders in the above code structure diagram .textareainput

This article quotes https://www.cnblogs.com/wisewrong/p/10186611.html