I intend to use Vue3 to write a mall project, has begun to develop, after the completion of the test is officially open source to GitHub, let everyone can also use the ready-made Vue3 large mall project source code to practice hands.

  • Vue 3.0 is here, what should we do?
  • Vue3 Practical Composition Series: Combines Ant-Design-of-Vue Practical Composition API

The body of the

Earlier this year, I wrote a mall project using Vue and opened it to GitHub. Here’s a preview of the project:

The main technology stack used is Vue and Vant, version of Vue2.6.10 and Vant 2.5.0 respectively, so far, has been open source to GitHub for half a year.

Last month, the official version of Vue 3.0 was released. Many friends asked me if I would upgrade newbee-Mall Vue version to 3.0. I usually gave a positive answer, but I had no time to deal with the unfinished things on my hand.

So, I also want to let you know that THE newbee-mall-Vue-app, which is an open source mall project, I’m going to upgrade and refactor with Vue3, and I’m working on it now.

With the open source project I have done before, the use of Vue3 development of the mall project, all source will be all open source, not hidden tuck even any line of code, you can rest assured, open source warehouse address for github.com/newbee-ltd/… After the upgrade is complete, the code will all be put in this repository, interested can pay attention to first.

Next, I’ll cover the idea of the upgrade and the refactoring plan.

History of newbee-Mall Open source project

In fact, there have been two versions of the new bee mall project. This upgrade with Vue 3.0 should be the third iteration of the new bee Mall project.

Since I often publish articles on the Internet and have done several open source projects, I have also set up several QQ communication groups, including groups of 500 and groups of 2000 people. I have communicated with you in several communication groups, and it seems that you are more interested in mall projects, so I promised to develop a mall project. I had this idea in 2018, and then I started to do it.

In October 2019, I uploaded all the source code of the new Bee mall project in GitHub open source repository, which is the first version of the new bee Mall.

It has been more than a year now, and then also intermittently for optimization and problem modification, interested in can go to learn about the Spring Boot technology stack development mall project, open source address is as follows:

  • newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall
  • newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall

Newbee-mall has created a code repository on Both GitHub and the national code cloud. If you are slow to access GitHub, you are advised to check out the project on Gitee.

New bee mall, after the first edition of this open source project during that time, which is at the end of 2019, the group of friends and he said to a Vue version of the mall, I promise you will develop and open up, after I have been planning to use Vue for iteration of the project, in 2020 started to develop and own privately has been testing, Previous articles have also introduced the testing process and problems, and fixed bugs after testing problems.

The end of May 2020 will Vue version of all the code open source, this is the new bee mall of the second version, open source address is as follows:

  • newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall-vue-app
  • newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall-vue-app

The original new bee mall only has a PC terminal page, after adding the Vue version of the new bee mall display form more rich, the new bee mall has become such:

From left to right are: new bee mall backstage management system page, new bee mall PC terminal page, new bee mall Vue version of three pages.

The above is the general history and timeline of newbee-Mall open source project. Now it has stepped up to a new level, and it can be said that it has been progressing. In the future, more expansion and optimization will be done.

Ideas and specific development plans for the Newbee-Mall open source project to upgrade with Vue3

Last month, Vue 3.0 was officially released, so I don’t have to talk too much about Vue3. I’ll talk about the newbee-Mall open source project’s idea of using Vue3, and the specific development plan and open source time of the code.

The idea of refactoring upgrades

In fact, at the beginning of writing this open source mall project, I have been paying attention to Vue3 related matters, and even thought about using Vue3 to write directly, but the official version has not been released, so I continue to use Vue 2.x version development.

In May it was June release, in June it was July release, and in July it was August release. It just blew my head off, it was very spiritual, ha ha ha.

In August, we said we were going to release in September, and then we actually released the release, and on September 19, 2020, Vue3 is officially open source! Your head is on the side of my head.

With the official release of Vue3, and the constant communication with all the developers in the group, we decided to start the upgrade.

Specific development plans

It has been less than a month since the official version of Vue3 was released, and I am still learning and exploring. Now I have written many demos with Vue3 and more or less mastered some knowledge points, so I will devote myself to the upgrade and development of the Vue3 version of Newbee-Mall in the near future.

Starting from today, we plan to complete the upgrade within half a month. If the progress is fast, we will try to complete the test within this time and fix some obvious bugs.

Therefore, the specific time should be: the development will be completed at the end of October 2020, and then we will inform everyone in the group to help with online testing.

After the test, the official open source, so that you can also use the existing Vue3 project practice hands.

Preparation of other materials

In addition to the project development, I also need to prepare some pictures related to the project. Since I am working on the content of Vue3 version, I need to make some pictures with Vue3 elements. However, there are few ICONS of Vue3, so I am trying to make some pictures about Vue3 by myself.

The drawing is also very funny. There are not many materials for Vue3. Officially, there is only a Vue LOGO picture and a little pirate picture.

However, in the first picture, the crotch is directly pulled, and it started out like this:

When I saw it, I definitely had a brain haemorrhage at that moment.

This picture Lao Tze is to see once will laugh once, very want to send to yu Yu Creek big guy, too happy feeling, let him “praise” me. I have a feeling that when You see this picture, you will give me a “like”, after all, “too design sense”.

At that time, when I saw the “finished picture”, I smiled directly into a silly, how could it be like this? I didn’t feel it when I was doing it. After exporting the picture, HOW could I see something wrong?

Then I made a simple sketch. In fact, the picture I wanted was not complicated, just combining the two ICONS together to highlight the Vue3 element feel.

After that, I spent an afternoon looking for materials, changing backgrounds, typesetting, adjusting the size of elements and moving positions. Finally, I made the following effect:

The picture above is portrait with landscape layout as well. The picture is as follows:

Not only that, but also some elements of newbee-Mall, so I replaced the background image with a screenshot of the code and added the mall element, as shown below:

Finally is no longer the picture.

conclusion

Well, that’s the end of today’s sharing!

Next, we will develop new projects and wait for my good news.

In addition to indicate the reprint/source, all are the author’s original, welcome to reprint, but without the consent of the author must retain this paragraph of statement, and in the article page clearly given the original link, or reserve the right to seek legal responsibility.