This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together

1. Introduction

This article is intended as a component development primer, although relatively simple, but it will learn the entire process of a component from development to release, and will be updated in the future

2. Process introduction

The general steps for a component from development to live are as follows (we are only considering a component here, not a component library)

  1. Single-file component development: Develop and test functionality as normal single-file components
  2. Create a new project, bring in the components developed above, and write a packaged entry file
  3. It is recommended to perform local packaging and local test first. After the test is successful, proceed to the next step
  4. Write the read. me file
  5. Write an ignore list
  6. Register an NPM account
  7. Log in to the cli
  8. release

Let’s start with each step

3. Write components

Here is the Pagination component written, pagination. vue, which has been tested in the project

<template> <div class="page"> <a href="#" :style="{ backgroundColor: bgColor, color: </a > <a href="#" :style="{backgroundColor: bgColor, color: currentPage === page ? activeTextColor : textColor, }" v-for="page in pageList" :key="page" @click="pageChange(page)" > {{ page }} </a> <a href="#" :style="{ backgroundColor: bgColor, color: <span class=" totalPage" > <span class=" totalPage" > </div> </template> <script> export default { name: "moon-page", data() { return { pageList: [], currentPage: 1, // totalPage: 0,}; }, props: { total: { type: Number, default: () => 0, }, pageSize: { type: Number, default: () => 15, }, bgColor: { type: String, default: () => "#fff", }, textColor: { type: String, default: () => "#333", }, activeTextColor: { type: String, default: () => "orange", }, }, watch: { total(newValue) { this.totalPage = this.generatePageByTotal(newValue); this.pageList = this.generatePage(); }, pageSize(newValue) { this.totalPage = this.generatePageByPageSize(newValue); this.pageList = this.generatePage(); }, currentPage(newValue) { this.pageList = this.generatePage(); GeneratePageByTotal (total) {let totalPage = 0; generatePageByTotal(total) {let totalPage = 0; if (total % this.pageSize === 0) { totalPage = total / this.pageSize; } else { totalPage = Math.ceil(total / this.pageSize); } return totalPage; GeneratePageByPageSize (pageSize) {let totalPage = 0; if (this.total % pageSize === 0) { totalPage = this.total / pageSize; } else { totalPage = Math.ceil(this.total / pageSize); } return totalPage; GeneratePage () {let start = 1; Start = this.currentPage - start > 5? this.currentPage - 5 : start; let end = start + 9; End = end > this.totalPage; // if end = totalPage end = end > this.totalPage this.totalPage : end; // 3, start = end - start > 9; end = end - start > 9; start : end - 9 > 0 ? end - 9 : 1; const tmp = []; for (var i = start; i <= end; i++) { tmp.push(i); } return tmp; }, // When the user clicks on the page number pageChange(page) {this.currentPage = page; this.$emit("current_change", page); }, pre() { const page = this.currentPage - 1; this.currentPage = page; this.$emit("current_change", page); }, next() { const page = this.currentPage + 1; this.currentPage = page; this.$emit("current_change", page); ,}}}; </script> <style scoped> .page { width: 100%; display: flex; align-items: center; } .page .totlaPage { font-size: 14px; } .page .currentPage { color: orange; } .page a { display: inline-block; padding: 10px 15px; border: 1px solid #ddd; text-decoration: none; font-size: 16px; margin-right: 10px; } .page a:hover { color: orange; } </style>Copy the code

4. Initialize the project

It is suggested to build a new project, we can use vUE’s scaffolding tools, but I feel it is not suitable for scaffolding tools, better, there is no scaffolding tools below

Create a new project moon-Page

Run the following command to initialize the project

npm init -y
Copy the code

Create the SRC directory under the root directory, create the components directory, copy the component files written above to it, and create index.js

Create a.npmignore file in the root directory, which is used to compile a list of files not to be uploaded when publishing packages

Create a new webpack.config.js file in the root directory to write the packaging configuration

Create a readme. md file in the root directory to describe components

The final project catalog is as follows

5. Write index. Js

Index.js in the SRC/Components directory is the entry file for webPack packaging

/ / import components import Page from '. / components/Pagination. Vue '/ * * * 1, must be registered for a component a install method, after others into your bag, using the vue. Use global registration () method, Executes code * * 2 install method, this method is simple, is the global registration with Vue.com ponent method of a component, Vue.com Ponent's first parameter is the name of the registered component, which will be used in the future when the component is used in the project. The name attribute of the Pagination. Vue * component is moon-page *. The second parameter of Vue.component is the registered component. * */ Page. Install => Vue.component(Page. Name, Page) Others can import export default Page from their own project (import Page from 'moon-page')Copy the code

6. Write the WebPack configuration

Once the basic work above is ready, open webpack.config.js to pack the configuration

const path = require('path') const { VueLoaderPlugin } = require('vue-loader') module.exports = { entry: { index: Path. join(__dirname, "/ SRC /index.js") // Set the package entry file}, output: {path: Path. join(__dirname, "/dist"), // pack the file to dist folder publicPath: '/dist/', // set the publicPath filename: "Pagination. js", // Set the output file to pagination.js libraryTarget: }, module: {rules: [{test: /.vue$/, loader: 'vue-loader' }, { test: /.css$/, use: ['style-loader', 'css-loader'] }, { test: /.m?js$/, exclude: /node_modules|vue/dist|vue-router/|vue-loader/|vue-hot-reload-api//, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, plugins: [ new VueLoaderPlugin() ] }Copy the code

There are many loaders configured in our Module, so we need to install corresponding loaders. I will share the package.json code later

7. Write a package.json file and proceed with the packaging configuration

{"name": "moon-page", "version": "1.0.2", "description": "a simple pagination component ", "main": "dist/pagination. Js ", "scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "webpack --mode production", "dev": "webpack-dev-server --open --mode development" }, "keywords": [ "page", "moon-pagination" ], "author": "Le ROI.", "license", "MIT", "devDependencies" : {" @ Babel/core ":" ^ 7.17.8 ", "@ Babel/preset - env" : "^ 7.16.11", "Babel - loader" : "^ 8.2.4", "CSS - loader" : "^ 6.7.1", "style - loader" : "^ 3.3.1", "vue - loader" : "^ 15.9.8 vue - the template -", "compiler" : "^" 2.6.4 ", "webpack" : "^ 5.70.0", "webpack - cli" : "^ 4.9.2"}}Copy the code

To make this clear, let’s take a screenshot to see what the configuration means

8. Make an ignore list

In the.npmignore file in the root directory, write a list of distribution-time ignore

Publish NPM publish, publish NPM publish, publish NPM publish, publish NPM publish, publish NPM publish

.* *.md ! README.md node_modules/ webpack.config.js src/Copy the code

9. Local testing

Now that everything is ready, it is recommended that you pack it locally and then test it before you release it

Run NPM run build first and then NPM pack

npm run build
npm pack
Copy the code

The following files are generated in the project root directory

This is the package we generated

You can copy this package to the root directory of your project, and then install it by executing a command (see the screenshot below) that will not be downloaded from NPM, but installed locally

Then import and register in the main.js file

And used in a component

10. Publish to NPM

First of all, register an NPM account from the official website. Please note that the email address can not use the yeah domain name, and other email addresses such as 163 and QQ can be used normally

After successful registration, run the NPM login command in the root directory of the moon-page project to login

You may encounter the following error when logging in, because you are currently configured with a domestic mirror, it is good to mirror and return to the official NPM, because after all, we will publish the package to the official NPM website

If there is no problem with the image and the account is correctly entered, NPM will send you an email, copy the code in the email, and then login is successful

You only need to run the NPM publish command to publish successfully

Note that the value of the “version” attribute in package.json must be changed for multiple releases; otherwise, the package cannot be published successfully

Follow-up:

NPM install moon-page is almost immediately available, but if you are using a domestic image source, it may take a few minutes, so wait a few minutes and you will be able to install it using a domestic image source

​