Use vue publish your own ui component packages on npm

Npm can go ahead on their own search package name you want to upload, after all unified to use the package name in the file, to avoid making mistakes.
npm official website

1. Install

vue init webpack-simple jed-nui
jed-nui is found over before I go npm package name, not duplicate, so the project on the use of the name

2. Go to the project, written in assembly

There should be based vue are not difficult

Create a file directory

├── src
│   ├── packages //存放组件包
│           ├── button
|                   ├── index.js   //配置文件
|                   ├── index.vue  //组件
│                   └── main.sass  //组件样式表
|       ├── index.js  //统一配置

So the general structure

Writing components

Export time to pay attention, to add the component name (since you want to use in the project name), like hungry in what uiel-button

export default {
name:"jed-button",
....
}

In app.vue introduced, to see whether the corresponding effect occurs

3. Related

3.1 Configuration Plug

Carried out in a plug assembly disposed in the package index.js

import JedButton from './index.vue';
JedButton.install = Vue => Vue.component(JedButton.name, JedButton);//.name就是开始说的vue文件暴露出来的name名，JedButton整个组件
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(JedButton);
}
export default JedButton;

We all know that our package is really a plug-in, available only through vue.use (plug-in name).
Specific reference vue plug-official documents

If there is only one component that we can configure as above, but if too many components, we can build a unified configuration index.js
unified configuration index.js under the root directory of packages

import JedButton from “./button/index.js”
import JedForm from "./form/index.js"
//引入全部js文件
const components=[JedButton,JedForm]
const install=function(Vue,opts={}){
components.forEach((elem,i)=>{
Vue.component(elem.name, elem);
})
}
export default install

This is basically ok to want to get away

3.2 Configuration webpack.config.js

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
  // entry: './src/main.js',
  // output: {
  //   path: path.resolve(__dirname, './dist'),
  //   publicPath: '/dist/',
  //   filename: 'build.js'
  // },
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/packages/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',//路径
    filename: 'jed-nui.js',//打包之后的名称
    library: 'jed-nui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

There is nothing to talk about, mainly after reminding the package file name is best to use your npm package name published.

3.3 arrangement package.json

{
  "name": "jed-nui",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "hansu123 <[email protected]>",
  "license": "MIT",
  "private": false,//设置成公开的
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "keywords": [
    "jed-nui"
  ],//随便设置不设置
  "main": "dist/jed-nui.js",
  //关键，这里的路径一定是你webpack.congfig.js中的filename,否则你在项目引入的时候会报错，cant resolve
  //如果不设置的话，你在项目引入你发布的包的时候需要import包的相对路径，得自己找很麻烦
  "files":[
    "dist",
    "src"
  ]
  //打包后在包中存在的文件，这个你可以在安装自己的包后在node_modules中查看
}

Normal to change these on ok

Modify .ignore

.DS_Store
node_modules/
npm-debug.log
yarn-error.log

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

4. The local test

Bale

npm run build
npm pack

This will generate a file in the project tgz
Here Insert Picture Description

Vue project into another test

npm i ./jed-nui-1.0.0.tgz

Introduced

main.js in

import jedUI from "jed-nui"
Vue.use(jedUI)

In use in app.vue

<jed-button type="danger">hansu</jed-button><br>
<jed-button type="warning">hansu</jed-button><br>
<jed-button type="danger" size="large">hansu</jed-button>

final effect
jedUI

5.npm release

5.1 to go to the official website to register an account

npm official website

5.2 released

npm login
npm publish

Not surprisingly, you will encounter the following error:

Question 1

Do not use cnpm

cnpm warehouse just npm a copy of the warehouse, it does not assume publish the work, so you use cnpm publish command execution failed.

Handover original image

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

Taobao mirror switch

npm config set registry=https://registry.npm.taobao.org/

Question 2

Unable to authenticate？

The latest update npm

npm i -g npm

Question 3

E-mail verification
will pop up click to send a message

The last execution
npm publish
buttoned

Here Insert Picture Description

6. Local modify index.html

After packing src path will change, so we need to modify the path in the src index.html, the page will have nothing else

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jed-nui</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/jed-nui.js"></script>
  </body>
</html>

For more details refer to the hungry components make it UI

What open source document hungry UI