Vue create project-name The current project directory looks like this:

First, you need to create an packages directory to hold the components

Then change the SRC directory to examples as an example

2. 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

Create a vue.config.js file in the root directory

// vue.config.js

module.exports = {
  // Add the Examples directory to the new page
  pages: {
    index: {
      // Page entry
      entry: 'examples/main.js'.// Source of template
      template: 'public/index.html'.// Output file name
      filename: 'index.html'}}}Copy the code

Once this is done, 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 here

Third, develop components

An packages directory has been created to hold the components

This directory contains a separate development directory for each component and an index.js to integrate all components and export them

Each component should be classified in a separate directory, including its component source directory SRC, and index.js for external reference

For example, the textarea component has the following complete packages directory structure:

Textarea/SRC /main.vue is the development file for the component. The code will not be shown here

Note that the component must declare a name, which is the label of the component

Textarea /index.js is used to export individual components and needs to be configured here if you want to import on demand

// packages/textarea/index.js

// Import component, component must declare name
import Textarea from './main.vue'

// Add the install method to the component for import on demand
Textarea.install = function (Vue) {
    Vue.component(Textarea.name, Textarea)
}

export default Textarea
Copy the code

Integrate and export components

Edit the packages/index.js file to implement global registration of components

// packages / index.js

// Import a single component
import Textarea from './textarea/index'

// Store components in an array structure for easy traversal
const components = [
    Textarea
]

// Define the install method
const install = function (Vue) {
    if (install.installed) return
    install.installed = true
    // Iterate over and register global components
    components.map(component= > {
        Vue.component(component.name, component)
    })
}

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

export default {
    // The exported object must have an install method
    install,
    // Component list. components }Copy the code

At this point the component is developed

You can introduce this component in examples/main.js

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

Then you can directly use the Textarea component you just developed

The tag of a component is the name defined within the component

NPM Run Serve starts the project and tests the components for bugs

// Make sure you have added examples/main.js to vue.config.js before starting

Package components

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

Four main parameters are required:

1. Target: The default value is build application. Change the default value to lib to enable build library mode

2. Name: output file name

  1. Dest: the output directory, which defaults to dist. Here we’ll change it to lib

The default is SRC/app.vue. Change this to Packages /index.js

Based on this, add a lib command to the scripts in package.json

// pageage.json

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

Then run the NPM run lib command to compile the component

6. Prepare for release

First, you need to add the component information to package.json

Name: package name. This name must not conflict with an existing name.

Version: Indicates the version number, which cannot be the same as the historical version number.

Description: introduction;

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

Keyword: Keyword, separated by Spaces;

Author D.

Private: whether it is private. The value must be set to false before it can be published to NPM.

License: open source protocol.

Then create the.npmIgnore file and set it to ignore

The syntax for this file is the same as the syntax for.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*
Copy the code

Publish to NPM

If you have changed NPM mirror address, such as the use of Taobao mirror, first change back

npm config set registry http://registry.npmjs.org 
Copy the code

If you do not have an NPM account, you can create one by running the NPM adduser command or register with the NPM website

If you have an account registered on the website or have one before, use the NPM login command to login

Refer to the official documents for details

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

With everything in place, release the components:

npm publish
Copy the code