Install the vue – cli

Please make sure nodeJS,vue is installed first

NPM install -g@vue /cli

Vue CLI package name changed from vue-cli to @vue/ CLI. If you have installed an older version of VUe-CLI (1.x or 2.x) globally, you need to uninstall it first through NPM uninstall vue-cli -g or YARN Global Remove VUe-cli.

Vue-v Check whether the installation is successful

Bash: vue: command not found; Run vue -v in the installation directory to check whether the installation is successful. If the installation is successful, but an error is reported in other directories, please check whether the environment variables are correctly configured. If the fault persists, uninstall node,vue, and vue- CLI again

  • The user variables
  • System variables

Create a project

  • Create a project named vue-short-cut: vue create vue-short-cut
  • Select Settings: you can choose default(Babel, ESLint), or maally select features to choose your vuex,typescript, etc configuration.
  • Check whether the installation is successful:

Create the contents of the NPM package

1. Project directory (functional development, no problem in testing, normal installation of dependent packages if any)

2. Configuration in package.json

  • Check whether the package exists:www.npmjs.com/

  • Adding Component Information
   { 
    "name": "vue-short-cut".// Package name, which cannot conflict with an existing name;
    "version":"0.1.0 from".// The version number cannot be the same as the historical version number;
    "description":"Use vue's Directive to quickly get focus, support return, arrow keys, and return + arrow keys."./ / profile;
    "main":"lib/vue-short-cut.umd.min.js".// The entry file should point to the compiled package file;
    "keyword":"vue directive short cut focus".// Keywords, separated by Spaces;
    "author":"logmei"./ / the author;
    "private":false.// If private, change to false to publish to NPM;
    "license":"MIT".// Open source protocol.. }Copy the code
  • Add package commands in scripts (cli3+ does not need to configure webpack.config.js separately)

Build the target official document

  1. Target: Builds the application by default. Change it to lib to enable the build library mode
  2. Name: indicates the output file name
  3. Dest: output directory, dist by default, lib instead
  4. Entry: The path to the entry file. The default path is SRC/app. vue
 {
     "scripts": {"lib": "vue-cli-service build --target lib --name vue-short-cut --dest lib packages/index.js"}}Copy the code
  • (Optional) Git address, added in package.json
"repository": {
    "type": "git"."url": "https://github.com/axios/axios.git"
  }
Copy the code

3. Vue template component (for demonstration only)

If the component has dependencies, install NPM I element-ui-d and save to the development dependency (name must be added to the.vue file).

Create the plugin file index.js

    import SearchComponent from './src'
    SearchComponent.install = Vue= > Vue.component(SearchComponent.name,SearchComponent)
    export default SearchComponent
Copy the code

If there are more plug-ins, you can continue to add, the file directory is

After creation, you need to create the build-time entry file Packages /index.js to implement global registration of components

    import CommonDialog from './CommonDialog/src'
    import Search from './Search/src'
    
    const components = [
      CommonDialog,
      Search
    ]
    
    const install = function(Vue){
      if(install.installed) return 
      install.installed = true
      components.map(component= > {
        Vue.component(component.name,component)
      })
    }
    
    /** Supports using labels to import */
    if(typeof window! ='undefined' && window.Vue){
      install(window.Vue)
    }
    
    export default{ install, ... components }Copy the code

4. Custom instructions (back on track)

    import KeyDownKey from './common/keydown.js'
    const shortCut = {
      inserted: function(el, binding, vnode) {
        switch (binding.arg) {
          case 'keydown' :
            setTimeout(function() {
              if (binding.modifiers.enter) (KeyDownKey.enter)(el, binding, vnode)
              if (binding.modifiers.arrow) (KeyDownKey.arrow)(el, binding, vnode)
              if (binding.modifiers.keyDown) (KeyDownKey.keyDown)(el, binding, vnode)
            }, 0)
    
            break}},componentUpdated: function(el, binding, vnode) {
        switch (binding.arg) {
          case 'keydown' :
            setTimeout(function() {
              if (binding.modifiers.enter) (KeyDownKey.enter)(el, binding, vnode)
              if (binding.modifiers.arrow) (KeyDownKey.arrow)(el, binding, vnode)
              if (binding.modifiers.keyDown) (KeyDownKey.keyDown)(el, binding, vnode)
            }, 0)
            break}}}const install = function(Vue) {
      Vue.directive('shortCut', shortCut)
    }
    shortCut.install = install
    export default shortCut
Copy the code

5. Add the compile command to package.json

Cli3 provides the build directive

"lib": "vue-cli-service build --target lib --name vue-short-cut --dest lib packages/directives/index.js"
Copy the code

Gitignore ignore files (files that are not ignored will be sent to NPM, the same directory after installation, just like unzips their own files, installed in node_modules)

    /dist
    /lib
    /src
    /packages
    /public
    vue.config.js
    babel.config.js
    *.map
    *.html
Copy the code

Release NPM package

1. Go to the official website to register userswww.npmjs.com

2. Local delivery

Login: NPM login
Publish: NPM publish

Issues encountered at launch

  • 1, need to modify the address, generally in order to download faster will be changednpm config set registry https://registry.npm.taobao.org, but the NPM package must be published with the address of NPM:npm config set registry http://registry.npmjs.org/

npm ERR! code E403
npm ERR! 403 Forbidden - PUT https://registry.npm.taobao.org/vue-short-cut - [no_perms] Private mode enable, only admin can publish this module
Copy the code
  • 2. Change package.json to name
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "vue-short-cut". Are you logged in as the correct user?
Copy the code
  • 3. If the package name is similar to an existing package, it will prompt you to change the package name, modify the name in package.json, and run itnpm publish --access=public
npm ERR! code E403
npm ERR! 403 Forbidden - PUT http://registry.npmjs.org/vue-short-cut - Package name too similar to existing packages; try renaming your package to '@logmei/vue-short-cut' and publishing with 'npm publish --access=public' instead
Copy the code
  • 4. The version cannot be repeated. You need to change the version in package.json
npm ERR! code E403
npm ERR! 403 Forbidden - PUT http:Size cut - You cannot publish over the previously published versions: 0.1.2.
Copy the code
  • Unpublish @logmei/vue-short-cut –force NPM unpublish @logmei/vue-short-cut –force

According to the specification, unpublish is only allowed with versions published in the last 24 hours. Even if you undo the package, you can no longer send the package with the same name and version as the package being revoked.

View the package after successful publishing

Use the published NPM package

The installationnpm i @logmei/vue-short-cut -D

Check the installation package and find that the installation is successful

References in main.js can also be referenced on individual pages

import VueShortCut from '@logmei/vue-short-cut'
Vue.use(VueShortCut)
Copy the code

View source code:Github.com/logmei/vue-…