Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to make a Vue component library and publish it to npm". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to make a Vue component library and publish it to npm.

1. Create a new folder and open it in the terminal to execute npm init-y.

The package.json is generated as follows. Note that if you want to publish to npm,name, there can be no underscores, uppercase letters, etc.

{"name": "vuecomponentdi", "version": "1.0.0", "description": "," main ":" index.js "," scripts ": {" test ":" echo\ "Error: no test specified\" & & exit 1 "}," keywords ": []," author ":"," license ":" ISC "}

2. Establish the directory structure

The directory structure is as follows

-vueComponentDi-- packages-- button-- index.js-- index.vue-- toast-- index.js-- index.vue-- index.js-- package.json

3. Local debugging

VueComponentDi/index.js

Export default function () {console.log ('local debugging')}

Create a new vue project

Vue create testvue

Testing under package.json under testvue relies on devDependencies to add vueComponentDi/index.js absolute addresses

DevDependencies: {. "vuecomponentdi": "F:/vueComponent@Di/vueComponentDi", / / fill in according to your actual project address.}

Execute npm link

Execute npm link in testvue to link vuecomponentdi soft to node_modules

Vuecomponentdi install Eslint

Since the testvue import component will perform Eslint detection, an error will be reported if it is not installed (this step can be omitted when testvue closes Eslint)

Installation method:

Npm install eslint@6.7.2-save-dev. / node_modules/.bin/eslint-init

Using vuecomponentdi in testvue

Import test from "vuecomponentdi"

/ / @ is an alias to / srcimport HelloWorld from'@ / components/HelloWorld.vue'import test from "vuecomponentdi" export default {name: 'Home', components: {HelloWorld}, created () {test ()}}

Console print > local debugging

4. Develop a button component

Button module: entering vueComponentDi/packages/button/index.vue

Type only supports passing in the primary attribute, and vmuron = "listeners" indicates that the v − on event listener in the parent scope (excluding the .native modifier) is included. It can be indicated by v − on= "listeners" that contains v-on event listeners in the parent scope (without .native modifiers). It can indicate that the v − on event listeners in the parent scope (without the .native modifier) are included by vmuron = "listeners". It can pass in internal components through v − on= "listeners"

Export default {name: "di-button", props: {type:String}}. Di-button {display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: # fff; border: 1px solid # dcdfe6; color: # 606266;-webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0 Transition: .1s; font-weight: 500;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; padding: 12px 20px; font-size: 14px; border-radius: 4px;} .di-button:focus, .di-button:hover {color: # 409eff.border-color: # c6e2ff; background-color: # ecf5ff;}. Di-button:active {color: # 3a8ee6 Border-color: # 3a8ee6; outline: none;} .di-button--primary {color: # fff; background-color: # 409eff; border-color: # 409eff;} .di-button--primary:focus, .di-button--primary:hover {background: # 66b1ff; border-color: # 66b1ff; color: # fff } .di-button--primary.is-active, .di-button--primary:active {background: # 3a8ee6; border-color: # 3a8ee6; color: # fff;}

Button module export: entering vueComponentDi/packages/button/index.js

If you export an object with an install function, you can call this function directly using Vue.use (xx) in Vue2, both by executing Vue.component (name,option) to create a component

Import button from ". / index.vue" button.install= (Vue) = > {Vue.component (button.name,button)} export default button

Aggregate export button: enter vueComponentDi/index.js

Because there is more than one component developed, you need to export it in the portal file.

Import diButton from ". / packages/button" export {diButton}

Used in testvue

Button / / @ is an alias to / srcimport Vue from 'vue'import {diButton} from "vuecomponentdi" Vue.use (diButton) export default {name:' Home'}

5. Develop a toast pop-up window

Toast module: vueComponentDi/packages/toast/index.vue

Type only supports warning and success

{{message}} export default {data () {return {message:'', show:false, type:''}. Di-toast {width: 60%; width: 200px; background: rgb (15,15,15); padding:3px; text-align: center; color: # fff; border-radius: 10px; position: fixed Left: calc (50%-100px); top: 200px;} .di-toast--warning {background: # FDF6EC; color: # E6A28B;} .di-toast--success {background: # F0F9EB; color: # 93C26D;}

Toast module export: vueComponentDi/packages/toast/index.js

Because the toast pop-up window needs to support this.$toast calls in vue, so use the Vue.extend method, this API is rarely used in daily development, usually it can be used when developing components, the official definition: use the basic Vue constructor to create a "subclass". Parameter is an object that contains component options

Import toast from'. / index.vue'toast.install = (Vue) = > {const toastConstructor = Vue.extend (toast); / / create a "subclass" using the underlying Vue constructor. Parameter is an object that contains component options. Let $vm = new toastConstructor (); / / instantiate this subclass let $el = $vm.$mount (). $el;//$vm performs $mount () manual mount will return an object with $el, and $el is a dom object document.querySelector ("body"). AppendChild ($el) / / add this dom object to body / / inject the $toast method Vue.prototype.$toast = (option) = > {$vm.show = true if (! (option instanceof Object)) {/ / if the object is not passed directly $vm.message = option} else {$vm.message = option.message $vm .type = option.type} setTimeout (() = > {$vm.show = false} 2000)} export default toast

Aggregate export: vueComponentDi/index.js

Import diButton from ". / packages/button" import toast from ". / packages/toast" export {diButton, toast}

Using toast in vuetest

Button / / @ is an alias to / srcimport Vue from "vue"; import {diButton, toast} from "vuecomponentdi"; Vue.use (diButton); Vue.use (toast); export default {name: "Home", methods: {toast () {/ / this.toast ("this is a normal pop-up window") / this.$toast ({/ / message: "this is a success pop-up window", / / type: "success", / /}); this.$toast ({message: "this is a warning pop-up window", type: "warning",});},},}

6. Publish to npm

Public configuration

The development of the component needs to be published to npm for others to use; because it is a public package, it needs to be configured in vueComponentDi/package.json.

"publishConfig": {"access": "public"}

Full package.json:

{"name": "vuecomponentdi", "version": "1.0.0", "description": "," main ":" index.js "," scripts ": {" test ":" echo\ "Error: no test specified\" & & exit 1 "}," keywords ": []," author ":"," license ":" ISC "," devDependencies ": {" eslint ":" ^ 6.7.2 " "eslint-plugin-vue": "^ 8.2.0"}, "publishConfig": {"access": "public"}}

Publish

The npm release is simple and requires only two commands:

Npm loginnpm publish

To execute npm login, you need to have a npm account, which can be registered on the official website of npm.

Npm official website address: https://www.npmjs.com/

After the release, you can install and use it in any vue2 project:

Npm install vuecomponentdi thank you for your reading, the above is the content of "how to make Vue component library and publish to npm". After the study of this article, I believe you have a deeper understanding of how to make Vue component library and publish it to npm, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.