Written in 2017.05.04

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/vu…

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

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

  • Yarn Run Build: packaging and publishing mode

    • This command will start withsrc/components/index.jsFor the entry file, passwebpackBuild output todistDirectory.
    • dist/index.jsThat’s what you’re going to post tonpmThe top bag.
    • Should you be familiar with 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
Copy the code

  • Yarn Run Build: document mode

    • By running theyarn run devWhat you are developing is 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].jsandmanifest.[hash].js, and independentcssThe files will be packed intodocsFolder.
    • source map *.[hash].mapIt’s automatically generated.
    • It is easy to use directlydocsDirectory as thegithub pagesResource 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 ~