This article is intended for those with basic Java knowledge

Author: HelloGitHub – Salieri

HelloGitHub introduces the Open Source project series.

Writing web pages is a miserable time for most non-front-end programmers. If JavaScript is still at a fighting level, HTML is a mountain to climb. What, you say you’ve climbed the HTML mountain? Surprisingly, CSS is looking up at you. All in all, writing front-end pages has always been a headache for me, not to mention the high-end manipulation of DOM elements, where the simplest horizontal and vertical text center can be found in a hundred hundred different ways. The point is, after all I tried, the word still didn’t appear where I expected it to. Do not know if you have experienced this kind of front-end development of despair, anyway, as experienced, BUT I can not pour over the bitter water!

If you thought this post was about poking fun at the front end, you’d be wrong. There was a time when my front world was dark until I met vue

First, “Record vue.js” review

PowerJob, a task scheduler middleware written in Java, is also a natural fit on the back end. Vue, on the other hand, is a very powerful front-end framework. PowerJob doesn’t appear to have any overlap with VUE except that the front page is written in VUE (and it doesn’t). And THE reason why I open a single chapter here net pull these have no, is not pure in order to make up the number of words, mainly take this opportunity to write a view.

“What do you think? What is the man talking about? I think I’ve lost my mind writing bugs lately.”

I don’t know if you have seen the documentary “Record vue.js”. As a non-documentary enthusiast and a non-front-end enthusiast, I was extremely serious and invested in watching the documentary.

When I watched this documentary, version 1.0.0 of PowerJob (OhMyScheduler) was just released. Although version 1.0.0 is not as rich as it is now, nor is its stability and user experience as good as it is now, it is still better than other task scheduling frameworks. So, before the official release, I used to fantasize about the big waves this framework would bring, and then secretly feel happy to live in my fantasy utopia every day. However, after the official launch, there was not even a ripple, let alone a storm. It was as if it had never happened.

So at that time, I was actually quite sad. How wonderful the fantasy was, the more contrast reality brings. It was also in this environment that I came across that there was a documentary about VUE, which tells the story of vUE’s birth up to now.

Of course, I did not go to see it directly, after all, I am a “double Non” person, the general situation is not interested in this kind of thing. But somehow I ended up opening bilibili (YouTube found it in English and opened it).

I think I’m going to watch this video for some sort of psychological balance. After all, even I know that VUE began as a personal project of Yudada. Since it is a personal project, will I have the same dilemma? If the world famous front-end framework at the beginning of the difficult to find my trouble, then I still worry about ~

However, I didn’t find what I was looking for. Vue gained a lot of attention in its early days and quickly accumulated a small number of users on GitHub. And I… Emmmm, but even though I didn’t find solace, I found motivation after watching the whole video.

Finally, close the chapter with a big closing sentence:

I made up my mind to leave my nine-to-five job and do something that I’m basically passionate about, and I’m really proud of it. Sometimes I look at statistics, like how many users we have, how many downloads we have. But if anything gives me a sense of accomplishment, or satisfaction, in my work, it’s when I see the people [I affect]. Especially after the conference, a lot of people come up to me. For example, people will shake my hand and say, “Thanks Evan for doing this, it really makes my life so much easier.” These are The Times I feel it, and that’s what motivates me to do Vue. I made it, AND I shared it with you, hoping it would make your life easier. And then there are people who actually come to me alone, people who thank me for what I’ve done. And so the whole cycle is connected.

Vue + element-UI

End of story, talk about “technology”.

For the front-end project of background management type, there are only a few functions (side navigation bar, top navigation bar, form, cousin, input box, button, etc.), so choosing a good template component can greatly improve the development efficiency. For example, with Element-UI, I switched from writing code to copying code, which was fun

Now that we’re done, let’s move on to a different front-end world of Vue + Element-UI

2.1 Creating a Project

First of all, background management site although simple, but at least is a front-end project. Therefore, it is no longer possible to open a new HTML file in the way that Xiao Bai loves. Instead, we need to initialize a complete front-end project. Fortunately, Vue provides us with a complete toolkit, just by running the command:

vue create powerjob-console
Copy the code

Follow the prompts to select the specified configuration to generate the complete VUE project. After the command line runs, CD into the project created, run the local debug command NPM run serve to see your first VUE web service ~

2.2 introduction of element – the UI

The official tagline for Element-UI is “Element, a Vue 2.0-based desktop component library for developers, designers, and product managers.” You can see how easy it is to use. Element-ui provides a large number of common templates, and each template carries a large number of code instances. It is a library of components that can be used by copying, pasting and modifying just a few parameters. What are you waiting for, installation

Element-ui has a dedicated plug-in for VUE-CLI, which is easy to install. Just go to the project directory and execute

vue add element
Copy the code

After the progress bar completes, the Element-UI is installed

2.3 Installing Plug-ins

At this point, the project body is initialized and development can theoretically begin. However, in the face of an original VUE project, I was still hard to start. Therefore, it is time for a variety of powerful frameworks to further reduce our development costs. Here are some plug-ins that I often use (and should also be used by everyone) for your reference:

  • Axios: A network request library that simplifies network operations
  • Vue-router: A routing plug-in for VUE, used to build single-page Web applications
  • Vuex: Centralized state management solution, I mainly use to store some common data

The plug-in installation is an NPM generic name in the format of NPM Install plug-in name –save. Json. This will be automatically installed when you run NPM Install in a different environment, otherwise you will need to reinstall the plug-in.

2.4 Follow the gourd

Here, the pre-development preparation can be said to be all completed, then formally enter the development link. The approach I recommend here is to find an existing project (such as PowerJob-Console) on GitHub and follow suit. For a background management project, the layout of the web page is fixed, the overall style is similar, and the specific components are almost identical, so it is easy to get started and modify. For PowerJob-Console, there are only four files to focus on: main.js, router.js, navbar. vue and sidebar. vue.

Main.js mainly completes the initialization of various plug-ins. There are few changes to be made, except baseURL, request interception and so on.

Router. js defines the Sidebar. Probably the joy of copying and pasting.

Navbar.vue and Sidebar. Vue can be directly copied here, the things inside is also a glance to know how to change the kind of.

After a while, you now have a general background of the following style. You just need to complete the development of specific pages. It’s all about forms. Go to the Element-UI website and you’ll see what copy-oriented programming really is

Well, that’s all for this article. This has been a tumultuous week for me…… I spent most of my time dealing with online issues, so please forgive me for writing this article in a hurry

In the next installment, we’ll be looking at how the MapReduce processor works, and maybe more

“What? You said I talked for a long time, vUE related knowledge did not speak?”

“What? More information about VUE? Just read the document and write it. She is so friendly to xiao Bai.”

Project Address:

Github.com/KFCFans/Pow…

Follow the public account to join the communication group (author in Java Group)