1. Initialization

npm init
Copy the code

Name, description, version, author, repository, etc. You can add -y by default

Look at my package.json

Since it is a VUE component, we need partial dependencies, such as less, ES6……

{
  "name": "vue-org-crazyyan"."version": "1.0.0"."description": "this is vue module"."main": "dist/vocbtn.min.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --hot --inline"."build": "webpack --display-error-details --config webpack.config.js"
  },
  "author": "CrazyYan"."license": "ISC"."devDependencies": {
    "babel-core": "^ 6.26.0"."babel-loader": "^ 7.1.2." "."babel-plugin-transform-object-rest-spread": "^ 6.26.0"."babel-plugin-transform-runtime": "^ 6.23.0"."babel-polyfill": "^ 6.26.0"."babel-preset-es2015": "^ 6.24.1"."css-loader": "^ 0.28.7"."es6-promise": "^ 4.4.1"."less": "^ 3.11.3"."less-loader": "^ 5.0.0"."style-loader": "^ 0.19.0"."url-loader": "^ 0.6.2"."vue": "^" 2.5.9."vue-hot-reload-api": "^ 2.2.4." "."vue-html-loader": "^ 1"."vue-loader": "^ 13.5.0"."vue-router": "^ 3.1.5." "."vue-style-loader": "^ 3.0.3." "."vue-template-compiler": "^ 2.6.11." "."vuex": "^ 3.1.2." "."webpack": "^ 3.9.1." "."webpack-dev-server": "^ 2.9.5"}}Copy the code

Then perform the download of these dependency recommendations CNPM

npm install
Copy the code

If less reports an error

npm install --save-dev less-loader less
Copy the code

2. Directory architecture and configuration

Here are all the new files you can refer to mine

SRC is the folder we wrote ourselves and dist is the folder we packaged and distributed

Configure WebPack

First you need to create a new webpack.config.js file in the root directory

Copy the following code into it, or you can define it yourself

const path = require("path"); const webpack = require("webpack"); const uglify = require("uglifyjs-webpack-plugin"); Module. exports = {devtool: 'source-map', // SRC /index.js file, entry: "./ SRC /index.js", output: Resolve (__dirname, './dist'), publicPath: '/dist/', filename: 'vocbtn.min.js', libraryTarget: 'umd', umdNamedDefine: true }, module: { rules: [{ test: /\.vue$/, loader: 'vue-loader' }, { test: /\.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" } ] }, { test: /\.js$/, exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//, loader: 'babel-loader' }, { test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/, loader: 'url-loader', query: { limit: 30000, name: '[name].[ext]?[hash]' } } ] }, plugins: [ new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }) ] };Copy the code

index.js

/ / introduction
import VocBtn from './app.vue'
/ / exposure
export default VocBtn;
Copy the code

3. Start working on components

App.vue is just like writing vUE components, not much different

<template> <div> <button class="voc-btn"> {{text}} </button> </div> </template> <script> export default { props:{ // Restrict the type of text text:{type:String,}}, data () {return {}; },} </script> <style lang='less' scoped> </ import 'styles/index.less'; </style>Copy the code

The style/index.less style is written as usual

.voc-btn{
    border: unset;
    padding: 4px 6px;
    text-align: center;
    font-size: 14px;
    background-color: #409eff;
    color: #fff;
    border-radius: 3px;
    border: 1px solid #409eff;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
}
.voc-btn:hover{
    border: 1px solid #fff;
    transition: border 0.2 s;
}
Copy the code

4. Wrap it up

npm run build
Copy the code

Change the entry in package.json to

"main": "dist/vocbtn.min.js",
Copy the code

5. Create. Npmignore

Create a.npmignore file in the root directory

Configuration is as follows

.*
*.md
*.yml
build/
node_modules/
src/
test/
gulpfile.js
Copy the code

At this point you’ve basically made a widget package

6. Release package

Make sure you have an NPM account before releasing the package

If not, you can register at www.npmjs.com/

Children’s shoes with account numbers look over here

npm login
Copy the code

Enter your username -> password -> email address

And then release

npm publish
Copy the code

There are often some strange errors when releasing packages

The general common error is

① Your NPM package already exists, you need to change the name

Modify the name value in package.json

② Use taobao source CNPM, login to CNPM

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

The registory attribute in package.json must be specified. The version in package.json must be larger than the previous one when NPM publishes.

Now that you’ve published successfully, you can create a VUe-CLI to try out your components

7. Use the package

Let’s download a VUe-CLI

vue create test-vue
cd test-vue
Copy the code

Download package

npm install vue-org-crazyyan
Copy the code

Installation – Registration

In the app. In vue

// Import VocBtn from'vue-org-crazyyan'// Register components:{VocBtn} // use <VocBtn text="I am a component."></VocBtn>
Copy the code

Start the

npm run serve
Copy the code

Open http://localhost:8080/

You’re done

Your component is done, isn’t it