The reading time is expected to be 5 minutes, full of dry goods, remember to like and favorites oh 😄

🎉Vue to build large single-page e-commerce applications open source! Click me to see the source 🚀🚀

First, write first

You dig friends have been waiting for a long time, recently writing Vue family bucket +Vant from zero development to build e-commerce App combat project, the project is basically finished, the back will be shared irregularly, looking forward to your dig friends’ attention.

2. Registration and login

Registered login, almost all the necessary electricity App module, just want to put off this knowledge today, detailed written down, used the nuggets friends all know that the nuggets are the PC login interface is, when you enter the account of the cat will be pleased to enter the password, of a cat will cover their eyes, to see the lovely design, I like it, so I Draw on the nuggets of cuteness cat picture to write a login registration module, the following is the complete UI.


Iii. Overall UI construction idea

The UI part is very simple. As a whole, a picture is placed in a big box on the outermost layer, and a small box with rounded edges is placed inside. Then, the cute cat is positioned in the middle of the top of the small box, and relevant input boxes and buttons are built with the help of Vant.

Iv. Use of Vant

Vant is an open source UI component that is very suitable for e-commerce App. It is very cool to use. My whole project is built with Vant UI, which has a unified style and is easy to use. To start with the introduction of Vant into your project, it is recommended to create a separate file to manage the introduction of Vant components into the module and load it as needed. The principle is to load it as needed.

The switch between registration and login uses Vant’s TAB page component to quickly switch between login and registration pages.

Vant TAB follows the document, very simple and easy to use.

The input box uses Vant’s Field component Vant Field

The Button uses Vant’s Button component Vant Button

Five, cute cat switch

Of cat according to your input box switching of different style, different switch is actually three images, one or three images are loaded into the page, and then through the v – show the way to control their shows that this way feel a little bit of a problem, I adopt the way of data driven interface, click to which position, let the img tags which image to load.

ChangeImage (index) {if (index == 0) {
        this.imageURL = require('. /.. /.. /images/login/greeting.png')}else if (index == 1) {
        this.imageURL = require('. /.. /.. /images/login/blindfold.png')}else {
        this.imageURL = require('. /.. /.. /images/login/normal.png')}},Copy the code

Six, countdown

The countdown is actually a timer, first set the total time, and then minus one every second until it reaches zero, and then restore the button click state.

// Send the mobile verification codesendVerifyCode () {
      Toast({
        message: 'Send captcha',
        duration: 800

      });
      this.countDown = 60;
      this.timeIntervalID = setInterval(() => { this.countDown--; // Clear timer if reduced to 0if(this.countDown == 0) { clearInterval(this.timeIntervalID); }}}, 1000)Copy the code

7. Mobile phone number regularization verification

Verify that the entered phone number is correct by calculating the property, and then call the calculated property at the appropriate location

Computed: {// Verify mobile phone numbers correctlyphoneNumVerify () {
      return,4,5,6,7,8 / [1] [3] [0-9] {9} $/. The test (enclosing tel_registered); }},Copy the code

Verification code module

The verification code is basically the IMG tag request interface to get the image, and when the image is clicked, request the latest image again.

// Switch the verification codegetCaptcha() {// Get the label of the verification codelet captchaEle = this.$refs.captcha;
      this.$set(captchaEle, 'src'.'http://192.168.0.1/web/xlmc/api/captcha? time=' + new Date());
    },
Copy the code

Nine,

Registration and login is only a part of the whole project, first share, later will be the whole complete e-commerce project to share, I hope you can like and pay attention to, your like can let more people learn together, progress together 😄

X. Complete e-commerce project

The homepage module

Classification module

What to eat module

Shopping cart module


Personal Center module

Share links in the past

  • Vue Sweet White series column:

    • Vue: What is Vue?
    • Vue from sweet little white to leather big guy series (2) V – command
    • Vue from sweet white to leather big guy series (iii) life cycle
    • Vue from sweet white to leather big guy series (4) custom instructions
    • Vue from sweet white to leather big guy series (five) components
    • Vue from sweet little white to leather big guy series (six) component communication
    • Vue from sweet little white to leather big guy series (seven) Vue Router
    • Vue from sweet little white to leather big guy series (eight) Vuex

  • A weekly algorithm series

    • Evaluate the inverse Polish expression
    • Fibonacci numbers
    • Merges two ordered lists

Finally, thank you for your attention!

My GitHub, hope to get your little star ~

I hope my share can be helpful to you, there are incorrect places also hope to get your erratum! I will be very grateful, in addition, if you want to get the whole period of front-end learning video and information scan the following TWO-DIMENSIONAL code, reply to learn, but also hope that in the way of front-end advancement, we grow together, progress together!