This is the first day of my participation in the First Challenge 2022

Written in the beginning

After half a month, recently I finally have some time to write an article (￣▽￣), writing an article I always think is a good way to consolidate knowledge, not only deepen and consolidate what they have learned, but also have a better arrangement and induction, also can facilitate their own reference at any time.

The theme of this article is the source code series of Element-UI. Element-ui includes a new version of Element-Plus. I have always thought that there are two very good UI frameworks (of course, other frameworks are also great, manual head save life – -), and they are worth reading carefully. You’re gonna learn a lot. Really. Trust me.

To prepare

So let’s cut the crap and get started!

Create entry file

First, find a good place on your computer, create a folder, and initialize the package.json file with NPM init-y. Create the SRC folder and under it create the SRC /index.js entry file, which will be the overall entry file for our project.

Create the first component

Next, we will create the first component of the project. We will create the packages folder next to the SRC folder, which will store the source code of each component in our project. Create a structure directory for the first component, button, as follows:

Each component will have a corresponding folder named under the Package folder, which is mainly composed of an index.js main file and a SRC folder. This is the same as the source structure of the element-UI.

Write entry files and component content

The job of the entry file (SRC /index.js) is to import and register all components and provide the install() method externally for the vue.use () method to use.

// src/index.js import Button from '.. /packages/Button/index.js'; const components = [Button]; const install = (Vue) => { components.forEach(component => { Vue.component(component.name, component); } export default {install, Button}Copy the code

The button.vue component let’s just write something about it.

// button.vue <template> <div> <script> export default {name: 'ElButton'}; </script>Copy the code

The button/index.js component name is the name of the element UI itself, but you can change it if you like, that’s not the point.

// button/index.js import ElButton from './src/button.vue'; /* Istanbul ignore next */ elbutton.install = function(Vue) {// ElButton); }; export default ElButton;Copy the code

When compiling button/index.js file, there are two things to pay attention to. One is the problem of file suffix, because our project is built from scratch, without any other auxiliary tools, so when importing a file, we must provide a complete path. Most of the time, we are used to importing files without the.js,.vue, and.ts suffixes, but this is not an inherent “ability”, that is because we have integration AIDS with various CLI tools, of course, we can later configure this ability after integrating webPack; The second thing to note is that the install() method is mounted on the component. Its purpose is to provide the on-demand loading capability of the component, which will be covered in a future article but can be ignored.

packaging

Now that the project is ready, we need to package the project, using webPack as we did with ElementUI.

The introduction of webpack

We will use two webPack-related packages. In order to avoid unnecessary trouble, you can first keep the same version as ME: NPM install [email protected] [email protected] -d.

Then, in the project root directory, create a new Build folder, which holds all the relevant configuration files packed by the project, and create the build/webpack.common.js configuration file.

Writing the basic configuration of WebPack:

// build/webpack.common.js const path = require('path'); module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(process.cwd(), './lib'), filename: 'element-ui.common.js', libraryTarget: 'commonjs2', // assigns the library return value to module.exports}};Copy the code

Process.vue files

Because the component we wrote uses files with the suffix.vue, webpack does not recognize these types of files, webpack only recognizes.js and.json files, all other types of files need to find the relevant loader to process before they can be handed to Webpack. (Loader is the core content of Webpack, here is not more about, do not understand can first find some articles to read)

There are two main packages we will use to process.vue files: NPM install [email protected] [email protected] -d.

Writing configuration files:

// build/webpack.common.js const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(process.cwd(), './lib'), filename: 'element-ui.common.js', libraryTarget: Module. exports}, module: {rules: [{test: /\. Vue $/, loader: 'vue-loader', options: {compilerOptions: {preserveWhitespace: false}}},]}, plugins: [new VueLoaderPlugin()]};Copy the code

Configure command line packaging

After the configuration file is written, you can configure the packaging command to facilitate subsequent packaging.

{" name ":" juejin - element - the UI ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" build ": "webpack --config build/webpack.common.js" }, "author": "", "license": "ISC", "devDependencies": {" vue - the template - the compiler ":" ^ 2.6.14 ", "vue - loader" : "^ 15.7.0", "webpack" : "^ 4.14.0", "webpack - cli" : "^3.0.8" dependencies: {}}Copy the code

Execute pack command

After configuring the package command, we execute it (NPM run build), which should generate an element-ui.mon.js file in the lib folder at the root of the project.

If there is an error in the implementation of packaging, do not panic, carefully report the error information, Webpack packaging error is very friendly, or you can screenshot to me.

test

From here to here, the pre-project work is done, and now we’re in the testing phase, and we’ve written so many mules and horses to walk on the page.

Here are two ways to test your project:

Method 1: project package cost NPM package

  • Modify thepackage.jsonOf the filemainConfiguration item, change to the generated file after packaging.
{" name ":" juejin - element - the UI ", "version" : "1.0.0", "description" : ""," main ":" lib/element-ui.com mon. Js ", "scripts" : { "build": "webpack --config build/webpack.common.js" }, "author": "", "license": "ISC", "devDependencies": {" vue - the template - the compiler ":" ^ 2.6.14 ", "vue - loader" : "^ 15.7.0", "webpack" : "^ 4.14.0", "webpack - cli" : "^3.0.8" dependencies: {}}Copy the code
  • performnpm packCommand, generate.tgzThe package.

  • Download localnpmPackage to be used in real projects.

Let’s initialize a random Vue project.

Vue create juejin-element-uI-testCopy the code

We then download the local NPM package we just generated in the new project.

NPM install F:\juejin-element-ui\juejin-element-ui-1.0.0. TGZ \juejin-element-ui-1.0.0. TGZCopy the code

When finished, your Vue project’s package.json file will have an extra package, which can then be used as a normal NPM package.

Global import in the project main.js file.

import juejinElementUI from 'juejin-element-ui';
Vue.use(juejinElementUI);
Copy the code

Specific use in the page.

<template>
  <div id="app">
    <el-button></el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>
Copy the code

You can see that the component is properly identified, and you’re done. This process is still error-prone, so pay attention to repackaging, redownloading, restarting the project, etc. ٩ (๑ ❛ ᴗ ❛ ๑) ۶

Summary: 1. Remember to package the original project as NPM Run Build. 2. Modify the main configuration item of the package.json file to locate the generated import file. 3. Run NPM pack to generate a TGZ package. 4. Download NPM install to the full path where the TGZ package is stored.

Method 2: HTML file quick test. Vue file

  • To create a.htmlFile.

We create the examples folder in our project and create an.html file under it.

  • writehtmlFile contents.
<! DOCTYPE HTML >< HTML >< head> <meta charset="UTF-8"> <title> <script SRC ="https://unpkg.com/vue"></script>  <script src="https://unpkg.com/http-vue-loader"></script> </head> <body> <div id="app"> <el-button></el-button> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: {}, components: { 'ElButton': httpVueLoader('.. /packages/button/src/button.vue') } }) </script> </body> </html>Copy the code

The main use of http-vue-loader package to process. Vue files, it is not familiar with the partners can understand.

  • the.vuefileexport defaulttomodule.exports = {}Form.
Export default {module.exports = {name: 'ElButton'}; // exports = {name: 'ElButton'}; </script> <style scoped> </style>Copy the code
  • run.htmlThe file must be running on the server.

We need to start a server to access the index. HTML we created. The http-vue-loader example uses express to start the server. NPM install [email protected] -d.

Configure another command to start the server:

{" name ":" juejin - element - the UI ", "version" : "1.0.0", "description" : ""," main ":" lib/element-ui.com mon. Js ", "scripts" : { "dev": "webpack-dev-server --config build/webpack.common.js", "build": "webpack --config build/webpack.common.js" }, "author": "", "license": "ISC", "devDependencies": { "vue-loader": "^ 15.7.0 vue - the template -", "compiler" : "^ 2.6.14", "webpack" : "^ 4.14.0", "webpack - cli" : "^ 3.0.8", "webpack - dev - server" : "^3.1.11" dependencies: {}}Copy the code

Perform NPM run dev, visit http://localhost:8081/examples/ to see the effect.

There is a pit:

After we’ve done the above steps, we’re going to run.htmlFile, don’t just double-click to open it, or you’ll get a series of errors.mainlyhttp-vue-loaderSome environmental requirements are required for the use of




Content of the past

  • ElementUI source code series 1 – Building project architecture from scratch, project preparation, project packaging, project testing process
  • ElementUI source code series 2 – introducing SCSS, using GULp to convert SCSS to CSS and complete and compress, using CP – CLI to move directories and files
  • ElementUI source code series 3 – Learn the gen-cssfile.js file for automatically creating component. SCSS files and generating the contents of index.scss files
  • ElementUI source code series 4 – Learn how to automatically create component directory structure and generate components. Json file contents in new.js
  • ElementUI source code series 5 – Learn the contents of the build-entry.js file that automatically generates the master entry file index.js




At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.