It is believed that many developers and companies using Vue have the need to customize a set of UI component libraries of their own. However, to develop, test, package and publish this component library, it requires a lot of labor to build a complete set of environment. In order to solve this problem, I have built a development framework specially used to build the UI component library of Vue, so as to save the labor for setting up the environment and concentrate on the development of the component library.

I introduction

Project address:https://github.com/jrainlau/v …

Vue-DonutIs a development framework, cooperate withvue-cliUse. So first of all, ensure that the global installation hasvue-cli. Next, we can initialize our project:

Vueinit jrailau/vue-donut < project name >

Similar to officialvuejs-templates/webpackTemplate,Vue-DonutUsers are also allowed to make some configuration. After the configuration is completed, your component library directory will be generated. It is worth noting that the name of the final release of this component library is also the name of the project you have customized (of course these can be modified).

Next, follow the prompts, enter the project directory and passyarnCommand to download the required dependency package can be used.

The directory structure is as follows:

.
 ├──  index.html
 ├── package.json
 ├── src
 │   ├── app.vue
 │   ├── assets
 │   │   └──  donut.jpg
 │   ├── components
 │   │   ├── content.vue
 │   │   ├── header.vue
 │   │   ├── index.js
 │   │   ├── link.vue
 │   │   └── title.vue
 │   └── main.js
 └── webapck
 ├── build.js
 ├── dev.js
 ├── doc.js
 ├── webpack.base.config.js
 ├── webpack.build.config.js
 ├── webpack.dev.config.js
 └── webpack.doc.config.js

II. Orders

• yarn run dev: development model

  • viawebpack-dev-serverOpen a test server, and the officialvuejs-templates/webpackThe same in the template.

• yarn run build: Packaging and Publishing Mode

  • This command will takesrc/components/index.jsFor the entry file, throughwebpackOutput to after constructiondistDirectory.

  • dist/index.jsIs that you will be released tonpmThe bag above.

  • You should master it skillfully.How to write vue plug-ins

  • src/components/index.jsThe entry file should look like this:

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

• yarn run build: document mode

  • By runningyarn run dev, what you have developed is like an ordinary single-page application, which is also similar to the official document page of the component library. When the development is completed, you can package your application with this command.app.[hash].js,vendor.[hash].jsAndmanifest.[hash].js, and independentcssFiles will be packed todocsFolders

  • source map*.[hash].mapWill be automatically generated.

  • Can be conveniently and directly useddocsDirectory asgithub pagesThe resource directory of.

Iii. matters needing attention

Vue-DonutDefault uselessAs a preprocessor, if you need to use other preprocessors, you can customize the configuration.

The same applies to tests.

IV. Certificates

MIT

Some gossips

In the process of work, I met the need to build UI component library. It is not difficult to develop, but the trouble is how to introduce it into the project. First of all, we tried to use git’ssubmoduleThe solution is to use the UI component library directly as a sub-module of the project. Another way is to publish the entire component library to npm, and then use thewebpack.module.rulesTheexcludeIt uses the project’s webpack configuration to run the code of the component library through regular or functional methods. These two methods are not so elegant. After much thinking, we finally decided to build a more convenient and elegant development framework.

Before that, the use and configuration of webpack was only “understandable”, but never really started from scratch. In the process of building, we also encountered many pits, but we can find solutions through consulting official documents. There is no such thing as universal google and stackoverflow. During the construction process, many excellent practices were also referred to, such as the construction methods of the company’s predecessors and the construction methods officially produced by vue-cli. after the construction, the master of the webpack was greatly improved.

I hope this work can bring energy efficiency into play, and welcome to put forward questions and suggestions and communicate with me ~