Element UI project analysis

Talked about the vue plug-in development principle, can’t wait to build a set of their own plug-in library, that is familiar with the market’s most commonly used Vue UI component ———— Element UI start.

usevue init webpack-simple productNameInitialize the project

Prerequisites Node NPM vue- CLI

# init
vue init webpack-simple my-project

# run 
cd my-project
npm install 
npm run dev
Copy the code

Install Element in your project

npm install element-ui --save-dev
Copy the code

The directory structure

After installing element-ui, open the node_modules/element-ui directory

NPM installs elemental-UI files in node_modules. NPM installs elemental-ui files in node_modules. NPM installs elemental-ui files in node_modules. The project structure is also clearer and easier to understand. This is the release version.

element-ui
    |--- lib                        // Save the package and ask the file directory
    |--- packages                   // The component source directory
        |--- alert                  // The source package for the component
            |--- src                Bao / / component
            |--- index.js           // The entry file for the component
    |--- src                        // Source directory
        |--- directive              // Implement scroll optimization, mouse click optimization
        |--- locale                 // i18n internationalization
        |--- mixins                 // Vue mixer
        |--- transition             // Style transition effects
        |--- utils                  // Utility class package
        |--- index.js               // source code entry file
    |--- types                      / / typescript package
    |--- package.json               // NPM package dependencies, file configuration
Copy the code

As mentioned above, the source code for Element-UI is split into source version and release version, From the webpack entry in the build/webpack.common.js file of the source version, we can see that the entry of Element is SRC /index.js, so we will start with SRC /index.

src/index.js

// src/index.js

import Pagination from '.. /packages/pagination/index.js'
import Dialog from '.. /packages/dialog/index'.// Import component packages under Packages

const components = [   // put all components into components
    Pagination,
    Dialog,
    ...
]

const install = function(Vue,opts = {}) {

    components.map(component= > {
        // Traversal adds components to Vue
        Vue.component(component.name, component);
    });

    / / load
    Vue.use(Loading.directive);

    // Define the Vue prototype
    Vue.prototype.$ELEMENT = {
        size: opts.size || ' '.zIndex: opts.zIndex || 2000
    };

    Vue.prototype.$alert = MessageBox.alert;
}

Copy the code

The entry file for Element-UI follows the development approach of vue plug-in development.

The header of the file introduces Packages /xx/index.js, which is the entry file for Element’s built-in components.

Install is the public method of the Vue plug-in. This method is called when vue.use (element) is used. The first argument to this method is a Vue constructor, and the second argument is an optional object.

The second form of plug-ins mentioned in vUE plug-in development — Add global resources: Directives/filters/transitions/components In Install, the built-in files add components to Elemnet global resources in the form of component registrations. In projects that use Element, we use
directly, thanks to Vue.component(component.name,component). If you are not familiar with component registration, see the website for component registration

    Vue.use(Loading.directive);
Copy the code

This line of code is also a second form of plug-in development, which mounts the directive of a Loading component to a global resource.

It also uses the fourth form of plug-in mentioned in VUE plug-in development, the method of adding vUE instances

    Vue.prototype.$alert = MessageBox.alert;
Copy the code

When using Element, we can use this.$alert(‘ XXXX ‘).

    if (typeof window! = ='undefined' && window.Vue) {
    install(window.Vue);
    }
Copy the code

The install method is automatically executed when it detects that Vue is a global variable

module.exports = {
    version: 'xxx',
    install,
    CollapseTransition,
    Loading,
    Pagination,
    Dialog,
    ...
}
module.exports.default = module.exports;
Copy the code

Export Element, which is the object received with import Element from ‘Element’. The SRC /index.js file not only exports version Install, but also exports Dialog Loading components. This is because Element components can be imported into a project separately, and each built-in component also has an install method.

packages/button/src/index.js

After analyzing the SRC /index.js file, you can see that the core of Element is its components, and the different functional components make Element suitable for many scenarios.

We analyze the composition of an Element component from the entry point of the most common button.

import ElButton from './src/button';

/* istanbul ignore next */
ElButton.install = function(Vue) {
  Vue.component(ElButton.name, ElButton);
};

export default ElButton;


Copy the code

You can see that this file is a simple version of SRC /index and returns the ElButton object, which contains an install method. The install method also attaches an ElButton component resource to the Vue.

In the SRC /index.js file, Element imports the ElButton component. We know we write this when we use Element as a single component

   import {Button} from 'element-ui'
   Vue.use(Button)
Copy the code

Here vue. use(Button) finds the install method for the Button component and mounts an ElButton component resource to the Vue.

I’ve talked about vUE plug-in development and looked at the element-UI project structure and project entry files. In the next section we’ll talk about how to publish a project on NPM that we modeled on Element-UI.