Initialize the

React’s stamp here

steps

  1. Vue init webpack-simple my_project
  2. Run CD my_project; npm i; NPM run dev opens to see if initialization is successful.
  3. Change package.json private to false and add “main”:”dist/build.js”.
  4. Create a new file in the root directory. Npmignore, the file name in the file will be ignored to upload to NPM.
  5. Create a “BallScroll” folder in Components, create a “index.vue” file, and write your own code.
  6. Modify entry in webpack.config.js, module.exports to./src/Components/index.jsAnd the output plus:libraryTarget: 'umd'.
  7. Create a “Components” folder under SRC and a “index.js” file.
  8. Components under index.js write the code
mport BallScroll from './BallScroll/index.vue'; const sw_vue_plugs = { install(Vue, options) { Vue.component(BallScroll.name, BallScroll); }};if(typeof window ! = ='undefined' && window.Vue) {
  window.sw_vue_plugs = sw_vue_plugs;
  Vue.use(sw_vue_plugs);
};
export default sw_vue_plugs;
Copy the code
  1. Inside main.js, write the code
import sw_vue_plugs from './Components/index';
export default sw_vue_plugs;
Copy the code

Note that the name here is the same as the name of the index.js export under Components.

  1. Run NPM run build (remember to run NPM run build for every update).
  2. Run NPM adduser in the root directory of the project. Enter the NPM account password and email address. (note: If you have an account, enter NPM login to login. The account password and email address are also indispensable. If the error code E409 is reported, it is because the NPM of taobao is used, which leads to the login error. Taobao should not provide you with login service, change the NPM registry to the official one, run the code: NRM use NPM, if an error occurs, because NRM is not installed, run the code: NPM install -g NRM install NRM and then run the code: NRM use NPM.
  3. You can run NPM whoami to see if the current user is yourself.
  4. Run the code NPM publish to publish.
  5. Project introduction: Install the plug-in first:npm install sw_vue_plugs_instruction --save-dev

Note that the name here is the same as the package.json name.

  1. Introduce: in mian.js
import sw_vue_plugs_instruction from 'sw_vue_plugs_instruction';
Vue.use(sw_vue_plugs_instruction);
Copy the code
  1. Quote directly on the page:import { BallScroll } from "sw_vue_plugs_instruction";.

Maintaining the plugin

  1. The functions of the plug-in code have been expanded or modified, and a new version needs to be released. In addition to the code changes, you need to manually modify the version in package.json each time, which is the version number, indicating that the version has changed. The version number rule used by NPM is semver semantic version, initialized with 1.0.0, followed by the master version number. Revision number, major revision number is an incompatible API change, minor revision number is a functional addition, revision number is a problem fix.
  2. Run it againbabel src --out-dir libGet the latest lib and executenpm publishLaunch;
  3. How are projects in use updated after release? (1) If it is NPM, since it is its own plug-in, it can know what version has been changed. Find the version of the dependent package in package.json of the project, manually change the version number to the latest version, and then the project will runnpm install --forceIt’s ok; (2) If yarn is used, run the commandyarn upgradeAlso ok; (3) Because the dependency packages in the project will be updated, sometimes we will install third-party plug-ins to check.npm install -g npm-check-updatesRun,ncuView updatable packages,ncu -uUpdate package. Json,npm installUpgrade to the latest version.

When installing plug-ins, –save-dev is what you rely on while developing, and –save is what you rely on after publishing. -g indicates global installation, –save-dev can be abbreviated to -d, –save can be abbreviated to -s, and NPM install can be abbreviated to NPM I.

Code has been uploaded in the lot, lot address, welcome to visit (address: https://github.com/Songwei1029/vue_creat_plugs.git), welcome to leave a message if you have any questions