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-Donut
Is a development framework, cooperate withvue-cli
Use. 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-Donut
Users 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 passyarn
Command 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-
via
webpack-dev-server
Open a test server, and the officialvuejs-templates/webpackThe same in the template.
-
-
yarn run build
: Packaging and Publishing Mode-
This command will take
src/components/index.js
For the entry file, throughwebpack
Output to after constructiondist
Directory. -
dist/index.js
Is that you will be released tonpm
The bag above. -
You should master it skillfully.How to write vue plug-ins
-
src/components/index.js
The 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 running
yarn 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].js
Andmanifest.[hash].js
, and independentcss
Files will be packed todocs
Folders -
source map
*.[hash].map
Will be automatically generated. -
Can be conveniently and directly used
docs
Directory asgithub pages
The resource directory of.
-
Iii. matters needing attention
Vue-Donut
Default useless
As 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’ssubmodule
The 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.rules
Theexclude
It 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 ~