Recently, there are many projects in the company. There are common components in different projects. How to avoid the change of one requirement that causes all projects to take modification?

  • Directly into the project (need to copy in different projects)
  • Release tonpmOn the common module,

How to create a VUE component from 0 to publish to NPM in this project case

One, depend on the environment

  • 1.nodeThe environment
  • 2,vue-cliThe scaffold

Second, the use ofvue-cliBuild a project and basic configuration

  • 1. Create a basic project

    Vue init webpack- Simple MaucashCopy the code

  • 2. Basic structure of the project

  • 3. This project is based on iVIEW, and the iVIEW connection address needs to be installed and configured according to the official website

3. Local debugging

  • 1. Directly introduce local components into app.vue

    import maucashLogin from "./packages/maucash-login/maucash-login";
Copy the code

  • 2. The Maucash-Login component is the same as our local vUE component, which provides additional communication between components

Four, the local component test is ok, transform intovuePlug-in type

  • Create an index.js file in the component folder

    // Import components
import MaucashLogin from './maucash-login'

MaucashLogin.install = Vue= > Vue.component(MaucashLogin.name, MaucashLogin);

if (typeof window! = ='undefined' && window.Vue) {
  window.Vue.use(MaucashLogin);
}

export default MaucashLogin
Copy the code

  • Create an index.js file at the same level as packages (there may be multiple components under a package)

    import Maucash from './packages/maucash-login/index.js';

const components = [
  Maucash,
]

const install = function(Vue, opts = {}) {
  components.map(component= >{ Vue.component(component.name, component); })}/* Supports the use of tags to introduce */
if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  Maucash,
}
Copy the code

Modify the configuration file

  • 1. Modify the package.json file

    {
  "name": "maucash"."description": "Common Component Extraction in Maucash"."version": "1.0.2"."author": "kuangshp <[email protected]>".// Open source protocol
  "license": "MIT".// Private is false because the package is public
  "private": false.// Configure the main node. If we do not configure the main node, we do not need to import XX from 'package name' to reference other projects. We can only specify the relative path using the package name as the starting point
  "main": "dist/maucash.js"."scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot"."build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "axios": "^ 0.18.0." "."iview": "^ 2.14.1"."style-loader": "^ 0.23.1"."url-loader": "^ 1.1.2." "."vue": "^ 2.5.11"
  },
  // Specify the repository address where the code resides
  "repository": {
    "type": "git"."url": "[email protected]:maucash/maucash.git"
  },
  // Specify the folders that will exist in the package after the package is packaged
  "files": [
    "dist"."src"].// Specify the keyword
  "keywords": [
    "vue"."maucash"."code"."maucash code"].// The address of the project website
  "homepage": "https://github.com/kuangshp/maucash"."browserslist": [
    "1%" >."last 2 versions"."not ie <= 8"]."devDependencies": {
    "babel-core": "^ 6.26.0"."babel-loader": "^ 7.1.2." "."babel-plugin-transform-runtime": "^ 6.23.0"."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." "}}Copy the code

  • 2. Modify the. Gitignore file

    Since we’re using the dist folder, we’ll leave dist/ out of the.gitignore file.

  • Edit the webpack.config.js file

    var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;

module.exports = {
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js'.output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'.filename: 'maucash.js'.library: 'maucash'.libraryTarget: 'umd'.umdNamedDefine: true},... }Copy the code

6. Test your own package files locally

  • 1. Local packaging

    NPM Run Build # Generate NPM Pack for maucash-1.0.1. TGZ locallyCopy the code

  • 2. Local testing (in other projects)

    NPM install path /maucash1.01..tgz
Copy the code

  • 3, in the local project main.js

    import Maucash from 'maucash';
Vue.use(Maucash);
Copy the code

  • 4. Where it is needed

    <maucash-login :baseUrl="baseUrl" :headers="headers" @loginHandle="loginHandle"/>
Copy the code

  • 5, local tests can be published to NPM

7. Post tonpm(note that the mirror address should point to the NPM address)

  • 1. Register an account with NPM

  • 2, login

    npm login
Copy the code

  • 3. Add user information

    npm adduser
Copy the code

  • 4. Publish to remote repository (NPM)

    npm publish
Copy the code

  • 5. Delete packages from the remote repository

    npx force-unpublish package-name 'Cause description'
Copy the code

Eight, the supplementary knowledgeOperations on multiple local NPM images