This is the 26th day of my participation in Gwen Challenge


Project initialization

Use vuE-CLI scaffolding to quickly build a project

vue create demo
Copy the code


Select when creating :(you can also select according to your own needs)

Manually select features ↓ Babel, CSS pre-processors, Linter/formatter ↓ Sass/SCSS(with Dart-sass) ↓ ESlint+Standard Config ↓ Lint on save->In package.json ↓ noCopy the code


Start the project

cd demo
yarn serve
Copy the code

Modifying the directory Structure

│ ├─ dist │ // Package │ ├─ examples │ // SRC │ ├─ app.vue │ ├─ main.js │ ├─ packages │ // Package │ // Parts │ // Package │ // Parts │ // Parts │ // Parts │ / ├ ─ ─ fonts / / font package ├ ─ ─ index. The js / / the whole package of entrance ├ ─ ─ XXX. Vue / / component ├ ─ ─ public ├ ─ ─ the editorconfig ├ ─ ─ the gitignore ├ ─ ─ the npmignore ├ ─ ─ ├─ ├─ ├─ ├─ ├─ package.json.manu.config.js //Copy the code

vue.config.js

Exports = {pages: {pages: {examples/main.js', template: 'public/index.html', filename: 'index.html'}}, // Extend webpack configuration to include packages in compilation chainWebpack: config => { config.module .rule('js') .include.add(path.resolve(__dirname, 'packages')). The end (). The use (' Babel). Loader (' Babel - loader). Tap (options = > {/ / modify it options... return options }) } }Copy the code

packages/index.js

(Export the install method)

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Install = function (Vue) {forEach(item => {Vue.com (item.name, item)})} Use () if (typeof window! == 'undefined' && window.Vue) { install(window.Vue) } export default { install }Copy the code

Test in examples

1, modify examples/main.js

// add the following two lines of code: // import xxUI from '.. /packages' Vue.use(xxUI)Copy the code

2. Then you can use components directly in app.js, similar to the use of element-UI

Xx - xx - < button > button < / button >Copy the code

Build into the library

Add commands to package.json (specifying the appropriate packaging file)

"lib": "vue-cli-service build --target lib packages/index.js"
Copy the code
// Run yarn lib // to generate a dist packaged fileCopy the code

Put the project on Github

Component usage method readme.md

## set up vue project 'vue create demo' ## install component library 'yarn add ly-ui' ## import LyUI from 'lyln-ui' 'import 'lyln-ui/dist/ly-ui.css'` `Vue.use(LyUI)`Copy the code

Publish the package to NPM

1. Modify package.json

"Private ": false, "main": "dist/xx-ui.umd.min.js", // package entry fileCopy the code

Package. json name must be a name not found in NPM, otherwise it will be uploaded in the afternoon

# omit examples/ packages/ public/ # omit the specified file vue.config.js babel.config.js *.mapCopy the code

NPM upload command

NPM publish // NPM publish // NPM publish // NPM publish // NPM publish // NPM publish // NPM publish //Copy the code

Note: This version is required for each package upload (package.json version).