Build your own UI library based on elementUI

Because some projects have high requirements for UI control customization, but do not want to fully implement the ENTIRE UI, I came up with a method to modify element into their own UI control library, you can modify the source code of ElementUI and publish it on github. This way you can download it for use in your Vue project just like any other dependency package, and use it exactly the same way as ElementUI.

There are also drawbacks to this approach. For example, if the version of Element is upgraded or a bug is fixed, if you want to synchronize the code, you will need to modify the corresponding code in your project according to the modification record on the official website.

Operating environment:

Vue-cli: 2.9.6 (VUE project built using this scaffold)

Element-ui: 2.13.0 (modified to own UI library based on this version)

1. Create a VUE project

That’s easy. I’m just going to outline the main process

1. Initialize a VUE project

2. Run the VUE project

vue run dev

The project is up and running

Download the element-UI source code and modify it.

1, downloadElement – UI source

Directory structure after successful download

Build: Places the webPack configuration file.

Examples: Page document where the Element API is placed.

Packages: Components that hold elements (CSS styles are placed in this directory under Theme-chalk).

SRC /directives: Place custom directives.

SRC /locale: places the configuration file of the language.

SRC /mixins: Mixed files used to place components.

SRC/Transitions: Places the animation configuration file.

SRC /utils: Place the utility function files.

SRC /index.js: entry file for component registration.

Test: tests the file.

Types: This file contains typescript data classes.

2. Run the Element-UI project

NPM install // Install dependencies

NPM run dev:play // Project is running on port 8085

3. Start modifying the project name

Replace all element-UI with Chen-UI

Run the project again after the replacement and find that it does not work, which is normal and expected.

Let’s see what the problem is first

(I omit a picture here, actually I forgot to take a screenshot)

You can’t find some components, but don’t panic. You turn the project off and on again, and it’s running

4. Run NPM Run dist

This step mainly generates the lib directory, which contains the code that other projects actually reference when they use it

Then we uploaded it to our own Git

Ao · · ·

Don’t forget to remove lib from the.gitignore file so that files in the lib directory can be submitted

5. References in the project

1. Add it to package.json file first

"chen-ui": "git+https://github.com/chenmeng012/chen-ui.git",

The name of the chen-UI project is followed by the git address of the project.

2. Introduce chen-ui globally in main.js, as needed, in the same way as the use of element-ui. I’m just going to do global import

import Vue from 'vue';
import App from './App';
import router from './router';
import ChenUI from 'chen-ui';
import 'chen-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;
Vue.use(ChenUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
Copy the code

3. Use Chen-UI in components

Modify the helloWorld.vue file

<template> <div class="hello"> <el-button @click="dialogVisible = true"> Sync ="dialogVisible" width="30%" :before-close="handleClose"> <span> This is a piece of information </span> <span slot="footer" Class ="dialog-footer"> <el-button @click="dialogVisible = false"> </el-button> <el-button type="primary" @click="dialogVisible = false"> </el-button> </span> </el-dialog> </div> </template> <script> export default {name: 'HelloWorld', data () { return { dialogVisible: false, msg: 'Welcome to Your Vue.js App' } }, methods: {handleClose(done) {this.$confirm(' Confirm close? ') .then(_ => { done(); }) .catch(_ => {}); } } } </script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>Copy the code

Run the project and see what happens

6. Configure the automatic update chen-ui command

Js, update-chen-ui.bat, and update-chen-ui.sh files are created in the build directory of vue-demo project

Note: There is no need to create these three files, you can manually delete chen-UI and then CNPM I Chen-UI. However, if you use Jenkins paddler in your project, it will be very convenient to configure in this way. Of course, you also need to configure THE POm.

// update-chen-ui.js
const os = require("os");
let exec = require('child_process').exec;

function isWindows() {
  return os.platform() === 'win32';
}

let cmd = null;
if (isWindows()) {
  cmd = "cd build && update-chen-ui.bat";
} else {
  cmd = "./build/update-chen-ui.sh";
}

exec(cmd, (err, stdout) => {
  if (err) {
    console.error(err);
  }
  if (stdout) {
    console.log(stdout); }});Copy the code

Windows system

// update-chen-ui.bat
@echo off
chcp 65001cd .. /node_modules rd /s /q _chen-ui@2.13. 0@chen-ui //node_modules [email protected]@chen-ui folder name

if %errorlevel%==0(echo clear _chen-ui-@2.13. 0@chen-ui success!)else(echo clear _chen-ui-@2.13. 0@chen-ui failed!) rd /s /q chen-ui// the chen-UI folder name in node_modules

if %errorlevel%==0(Echo cleared Chen-UI successfully!)else(Echo failed to clear Chen-UI!) cd .. cnpm i chen-ui/ / install Chen - the UI

if %errorlevel%==0 ( // I don't know why. If you know, please contact me. Thank you very muchEcho install chen-UI successfully!elseEcho failed to install Chen-UI!Copy the code

Note: bat file will not run if you do not use webstorm to edit it (this problem may be caused by my webstorm problem, the specific reason has not been found), you should use notepad or notepad++ to compile.

Linux system

// update-chen-ui.sh
#! /usr/bin/env bash

echo "Clean up old Chen-UI installations..."
cd ./node_modules

rm -rf  _chen-ui@2.13. 0@chen-ui //node_modules [email protected]@chen-ui folder name

if [ $? -ne 0 ]; then
    echo "Failed to delete node_modules/[email protected]@chen-ui"
fi

rm -rf  chen-ui // the chen-UI folder name in node_modules

if [ $? -ne 0 ]; then
    echo "Failed to delete node_modules/chen-ui"
fi


echo "Update Chen - UI..."
cd ..
cnpm i chen-ui

if [ $? -ne 0 ]; then
    echo "Chen-ui execution failed"
else
    echo "Update Chen-UI OK"
fi
Copy the code

Then add a scripts command to package.json

update:ui": "node ./build/update-ctx-ui.js",

Then you can execute the NPM command and automatically update the Chen-UI

7. Next, modify the Chen-UI code to achieve the purpose of customizing UI controls.

Take a look at the chen-UI catalog again

In order to debug the code better, let’s run the project chen-UI first

npm run dev:play

As mentioned above, the main page of the project is in the examples/play/index.vue file. When you open this file, you will find that it introduces an input component by default. Let’s introduce a select component.

Let’s find the select component, package/select

In order to realize the function of the specific modify the code in the package/select/select vue file

Start by adding the HTML section to the template

I will use a screenshot, too much context code, not good performance, I will change the code is selected

So let’s add styles

The style files are under Packages /theme-chalk/ SRC

SCSS = select-dropdown. SCSS = select-dropdown. SCSS

Then use examples/play/index.vue

8. Update chen-UI in VUe-demo

Execute NPM Run Dist in the Chen-UI project

To line up the lib file, which is the real code referenced by other projects.

Don’t forget to submit the chen-UI code to Git before updating!!

Execute NPM Run Update: UI in vue-demo project

After the update is completed, let’s try to see if it can be used directly in the project

Modify the helloWorld.vue file

<template>
  <div class="hello">
    <el-select v-model="value" placeholder="Please select"
               :bottom-button="{title: 'new', visible: true, closeAfterClick: false}"
               @bottom-button-click="handleClick">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      options: [{
        value: 'option 1'.label: 'Gold cake'
      }, {
        value: 'option 2'.label: 'Double skin milk'
      }, {
        value: 'option 3'.label: Oyster omelet
      }, {
        value: 'option 4'.label: 'Dragon beard noodles'
      }, {
        value: 'option 5'.label: 'Peking Duck'}].value: ' '}},methods: {
    handleClick() {
      this.$message('Click add'); }}}</script>

<! -- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
Copy the code

Take a look at the page effect

That’s the end of this article

Iii. Contents of the gift

Add some more content!!

We see a component called the Scrollbar in Element-UI. This component is not published in Element-UI and is not available under normal circumstances. Publish it now so that other projects can reference this component.

1. In the types directory, create a scrollbar.d.ts file with the following contents

import {ElementUIComponent} from "./component";

export declare class ElScrollbar extends ElementUIComponent{}
Copy the code

2. Rename the original element-ui.d.ts to chen-ui.d.ts and then modify the code

Modify the helloWorld.vue file

<template> <div class="hello"> <el-scrollbar style="height: 200px"> <div v-for="item in scrollArr"> {{item.title}} </div> </el-scrollbar> </div> </template> <script> export default  { name: 'HelloWorld', data () { return {} }, computed: { scrollArr() { let arr = []; for(let i = 0; i < 50; I++) {arr. Push (${I} {title: ` project `})} return arr}}, the methods: {}} < / script > <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>Copy the code

Scrollbar can now be used in projects as well

In fact, the ScrollBar component can also pass in parameters, I will not introduce, this through the source code, practice can know the role of parameters.

Then update the Chen-UI. I’m not going to take screenshots anymore.

The above simple introduction of two simple examples, there may be other requirements in the form, which requires you to look at the source code, according to their own needs to modify the source code.

In fact, you can copy the whole folder of package into your own project and use it as your own component. Of course, you still need to modify the code and add some configuration, which is quite troublesome. I will write an article about this kind of problem when I have time. Small white one, do not like spray. Of course, there may be deficiencies and mistakes in the article, but also ask you to correct, very grateful!!

Build your own UI library based on elementUI

1. Create a VUE project

1. Initialize a VUE project

2. Run the VUE project

Download the element-UI source code and modify it.

1, downloadElement – UI source

2. Run the Element-UI project

3. Start modifying the project name

4. Run NPM Run dist

5. References in the project

1. Add it to package.json file first

2. Introduce chen-ui globally in main.js, as needed, in the same way as the use of element-ui. I’m just going to do global import

3. Use Chen-UI in components

6. Configure the automatic update chen-ui command

7. Next, modify the Chen-UI code to achieve the purpose of customizing UI controls.

8. Update chen-UI in VUe-demo

Iii. Contents of the gift

1. In the types directory, create a scrollbar.d.ts file with the following contents

2. Rename the original element-ui.d.ts to chen-ui.d.ts and then modify the code

Related Posts

Ant Design of Vue does not have a table summing row API

Devops concepts and practices

Lightning fast React-Refresh