Component library is based on vuE-CLI framework, using VUE-CLI to create projects

vue create hxy-ui

Copy the code

2. Modify the directory and the configuration file.

1, many open source component library source, like to use packages directory to store components, examples directory to display components. So in this project, change the SRC directory to examples to show the components. Create packages directories at the same level to hold components. Due to the change of directory, we need to re-configure webpack by creating vue. Congfig. Js in the outermost layer. The current directory structure is as follows:

2. Delete the contents of app. vue and the hellow.vue file

3. Configure the vue.config.js file. Re-run the project successfully.

const path = require("path"); Module. Exports = {/ / modify pages entry pages: {index: {entry: "examples/main. Js", / / the entry template: "Public /index.html", // template filename: "index.html", // output file},}, // Extend webPack configuration chainWebpack: (config) => {// @ default to SRC directory, Set ("@", path.resolve("examples")). Set ("~", packages config.resolve.alias.set ("@", path.resolve("examples")). path.resolve("packages")); // Add packages and examples to compile, Because new files are not processed by webpack by default config.module.rule ("js").include.add(/packages/).end().include.add(/examples/).end() . Use (" Babel "). The loader (" Babel - loader "). The tap ((options) = > {/ / modify it options... return options; }); }};Copy the code

3. Create a component

Create an HxyForm component folder under Packages and create an index.js file to export all components. The directory structure is as follows:

2. Create a SRC component folder under HxyFrom and create an index.js file to export the component. The directory structure is as follows:

3. Create hxyform. vue in SRC and write the component. The directory structure is as follows:

Component content: hxyform.vue content

<! <template> <div class="hxy-form" :style="hxyFormStyle"> <p> <label for="form-user"> < SVG class="icon" aria-hidden="true"> <use xlink:href="#icon-ueser_ico"></use> </svg> </label> <input type="text" id="form-user" Placeholder =" input user name "V-model ="form.user"> </p> <p> <label for="form-password"> < SVG class="icon" aria-hidden="true"> <use xlink:href="#icon-password"></use> </ SVG ></ label> <input type="password" id="form-password" placeholder=" placeholder" V - model = "form. The password" > < / p > < p > < button type = "button" @ click = BTN "()" > submit < / button > < / p > < / div > < / template > < script > //import x from '' export default {name: "hxyForm", // note that this name is required. {}, data() { return { form:{ user:"", password:"" } }; }, props:{ hxyFormStyle:{ type:Object, default:function(){ return { width:"200px", height:"100px", } } } }, methods: { btn(){ this.$emit("hxyFormSub",this.form) } }, }; </script> <style lang="less" scoped> //@import url() *{ box-sizing: border-box; margin: 0; padding: 0; } p{ width: 100%; height: 35%; border: 1px solid black; margin-bottom: 10%; border-radius: 3px; } p label{ height: 100%; width: 10%; } p input{ height: 100%; width: 90%; border: 0; outline: 0; padding: 0 3%; } p input:focus {transform: scale(1.2); transition: transform 2s ease; border: 1px solid black; } p:nth-last-of-type(1) { border: 0; } p:nth-last-of-type(1) button { width: 30%; height: 80%; text-align: center; cursor: pointer; border-radius: 50px; outline: 0; border: 1px solid rgb(88, 88, 223); } </style>Copy the code

Iconfont is introduced in index.html

<! </script> <style>. Icon {width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code

4. Expose components in HxyForm/index.js

Import hxyForm from "./ SRC/hxyForm "; hxyForm.install = (vue) => { vue.component(hxyForm.name, hxyForm); }; export default hxyForm;Copy the code

5. Finally, export all components in Packages /index.js

import HxyForm from "./HxyForm"; // List of all components const Components = [HxyForm]; Const install = function(Vue) {const install = function(Vue) {const install = function(Vue) {if (install.installed) return; install.installed = true; Component.map ((component) => vue.use (Component)); }; After all, we are based on Vue if (Typeof Window! == "undefined" && window.Vue) { install(window.Vue); } console.log(components); Export default {install, // All components must have install to use vue.use ()... components, }; // Load export {HxyForm} on demandCopy the code

6. Test components in a project

Import components in main.js

import hxyui from '.. /packages' Vue.use(hxyui);Copy the code

Called from the app.vue page

<template> <div id="app"> <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form> </div> </template>  <script> export default { name: "App", components: {}, data() { return { hxyFormStyle: { width: "300px", height: "100px", }, }; }, methods:{ hxyFormSub(data){ alert(data.user) alert(data.password) } } }; </script> <style lang="less"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

The final result

Release components

1. Add the following command to the scripts field of package.json:

  "lib": "vue-cli-service build --target lib --name  hxy-ui --dest lib packages/index.js"
Copy the code

–target: build target. Default is application mode. Here change to lib to enable library mode.

–dest: output directory, default dist. So let’s change this to lib

[Entry]: The last parameter is the entry file, which is SRC/app.vue by default. Here we specify compile packages/ component library directory.

2. Run the command

npm run lib
Copy the code

You will find that there is a lib folder under the directory as follows

3. Configure the package.json file

"Private ": false, // Allow upload to NPM "main": "lib/hxy-ui.umd.min.js", // program entry fileCopy the code

Package. json Other configurations are as follows

{" name ":" hxy - UI ", "version" : "0.1.0 from", "description" : "based on the component library of the vue - cli4: hxy - UI", "main" : "lib/hxy-ui.umd.min.js", "author": "hxy", "keywords": [ "hxy-ui" ], "private": false, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "lib": "vue-cli-service build --target lib --name hxy-ui --dest lib packages/index.js" }, "dependencies": { "core-js": "^ 3.6.5", "vue" : "^ 2.6.11"}, "devDependencies" : {" @ vue/cli - plugin - Babel ":" ~ 4.5.0 ", "@ vue/cli - plugin - eslint" : "~ 4.5.0 @", "vue/cli - service" : "~ 4.5.0", "@ vue/eslint - config - prettier" : "^ 6.0.0", "Babel - eslint" : "^ 10.1.0", "eslint" : "^ 6.7.2 eslint - plugin -", "prettier" : "^ 3.1.3", "eslint - plugin - vue" : "^ 6.2.2", "less" : "^ 3.0.4", "less - loader" : "^ 5.0.0", "prettier" : "^ 1.19.1", "vue - the template - the compiler" : "^ 2.6.11"}, "eslintConfig" : {" root ": true," env ": {" node" : true }, "extends": [ "plugin:vue/essential", "eslint:recommended", "@vue/prettier" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }Copy the code

4. Add. Npmignore files. Only compiled lib directories, package.json and readme. md need to be published when publishing. Therefore, the. Npmignore file is configured to ignore directories and files that do not need to be submitted.

Dist # local env files.env.local.env.*. Local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw* # Here are the new # to ignore directories and specify files examples/ packages/ public/ vue.config.js babel.config.js *.map *.htmlCopy the code
Publish to NPM

1. Now you need to register an account on NPM official website

2. Then login locally: NPM login (using CNPM requires downloading NRM to switch the source to the official source of NPM)

3. Finally publish to NPM: NPM publish

Test components

1. Start another project

2.npm i -s hxy-ui

3. Import components

Global reference UI library

It is referenced in main.js

import hxyui from 'hxy-ui'
import 'hxy-ui/lib/hxy-ui.css'
Vue.use(hxyui)
Copy the code

Calling a component in app.vue:

<template> <div id="app"> <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form> </div> </template>  <script> // import { HxyForm } from 'hxy-ui' // import "hxy-ui/lib/hxy-ui.css"; export default { name: "App", components: { // HxyForm }, data() { return { hxyFormStyle: { width: "500px", height: "100px", }, }; }, methods:{ hxyFormSub(data){ alert(data.user) alert(data.password) } } }; </script> <style > #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code
Local reference => Reference on demand

Import and register the reorganized file in app.vue

// Local reference => reference as needed

 import { HxyForm } from 'hxy-ui'  
 import "hxy-ui/lib/hxy-ui.css";
Copy the code

Registration:

components: {
    HxyForm
  },
Copy the code

Call:

 <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form>
Copy the code
The demo:
<template> <div id="app"> <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form> </div> </template> <script> // Local reference => import {HxyForm} from 'hxy-ui' import "hxy-ui/lib/hxy-ui.css"; export default { name: "App", components: { HxyForm }, data() { return { hxyFormStyle: { width: "500px", height: "100px", }, }; }, methods:{ hxyFormSub(data){ alert(data.user) alert(data.password) } } }; </script> <style > #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

4. Use effect

Hxyxy.top /index.php/W… This article is licensed under Creative Commons Attribution 4.0 international license, please indicate the source and this statement when reprinting!