I believe that many developers and companies using Vue have a need to customize their own UI component library. However, to develop, test, package, and publish this component library, it takes a lot of labor to set up a complete environment. To solve this problem, I set up a development framework specially used to build THE UI component library of Vue, so as to save the labor of building the environment and concentrate on the development of the component library.

Introduce a,

Project Address: github.com/jrainlau/v….

Vue-donut is a development framework used in conjunction with vue-CLI. Therefore, make sure that vuE-CLI is installed globally. Now we can initialize our project:

Vue init jrainlau/vue-donutCopy the code

Similar to the official Vuejs-Templates/Webpack templates, vue-Donut also allows you to do some configuration. After the configuration is complete, your component library directory will be generated. It is important to note that the final release name of the component library is also the project name you customize (these can be changed, of course).

Go to the project directory as prompted, and run the yarn command to download the required dependency packages.

The directory structure is as follows:

. ├ ─ ─ index. The HTML ├ ─ ─ package. The json ├ ─ ─ the SRC │ ├ ─ ─ app. Vue │ ├ ─ ─ assets │ │ └ ─ ─ donut. JPG │ ├ ─ ─ components │ │ ├ ─ ─ Content. vue │ │ ├ ─ ─ the header. The vue │ │ ├ ─ ─ index. The js │ │ ├ ─ ─ the link. The vue │ │ └ ─ ─ the title. The vue │ └ ─ ─ the main, js └ ─ ─ webapck ├ ─ ─ ├─ dev.js ├─ ├.js ├─ webPack.build.config.js ├─ webpack.dev.config.js ├─ webpack.build.config.js ├─ webpack.dev.config.js ├─ webpack.build.config webpack.doc.config.jsCopy the code

Second, the command

• Yarn Run Dev: development mode

  • Start a test server with webpack-dev-server, just like in the official Vuejs-Templates /webpack template.

• Yarn Run Build: packaging and publishing mode

  • This command takes SRC /components/index.js as the entry file, builds it through webpack and outputs it to the dist directory.

  • Dist /index.js is the package you will publish to NPM next.

  • Should you be familiar with how to write vue plug-ins

  • The SRC /components/index.js entry file should look something like this:

    import myComponent from './my-component.vue'
    
    const install = (Vue) => {
      Vue.component('my-componen', myComponent)
    }
    
    export default installCopy the code

• Yarn Run Build: document mode

  • By running Yarn Run Dev, you develop just like a normal one-page application, which is similar to the official documentation page of the component library. When development is complete, you can use this command to package your application. App.[hash].js, vendor.[hash].js and manifest.[hash].js, as well as individual CSS files, are packaged into the docs folder.

  • Source map *.[hash]. Map is automatically generated.

  • You can easily use the Docs directory directly as the github Pages resource directory.

Three, notes

Vue-donut uses less as the preprocessor by default. You can customize the preprocessor if you want to use other preprocessors.

Same thing with tests.

Fourth, the certificate

MIT

A little chatter

In the process of work, encountered the need to build UI component library. It’s easy to develop, but it’s hard to introduce it into a project. First, we tried git’s submodule approach, which uses the UI component library directly as a submodule of the project. Alternatively, publish the entire library to NPM and use the project’s WebPack configuration to run the library code in the webpack.module.rules exclude, either as a regular or as a function. Neither of these approaches is very elegant. After much thought, I decided to build a more convenient and elegant development framework.

Up until this point, webPack had been used and configured only to the point of “understanding,” but never really built from scratch. There were a few hicks in the build process, but most of the fixes can be found by consulting the official documentation, or, if not, the almighty Google and StackOverflow. In the process of building, I also referred to many excellent practices, such as the way of building the company’s predecessors, and the way of building the official vuE-CLI, etc. After building, MY master of Webpack has also been greatly improved.

I hope this work can play a role in energy efficiency, also welcome to send questions and suggestions to me ~