Project background

Imitation of Bilibili mobile terminal project, this project can consolidate the basic knowledge of VUE, including VUE project construction, VUE component related knowledge, routing, front and back end interface joint adjustment, this project uses vuE-CLI4.x scaffolding to create the project.

  • The technology stack includes: Vue2.6 + Vant + AXIOS + VUE-Router + ES6
  • Use VW units for adaptive layout
  • Vue routing adopts the history mode and lazy loading mode
  • Use Ali Mama Vector Icon Library (Iconfont)
  • Open source interface http://112.74.99.5:3000/web/api

The main functions are as follows:

1. Project environment construction

This section describes how to set up a VUE project. Check that node and NPM are already installed.

Step 1: After installing Node and NPM,

NPM install --global vue- CLICopy the code

Step 2: Run the terminal CD command to go to the project space directory, such as my highcopy-blibili directory, and enter the following command

Vue init Webpack test (test is my project name)Copy the code

Then the following mode will appear. Choose Yes or no according to your needsThe following message is displayed after the installation is successfulCD tset enters the project NPM run dev the project is ready to run

2. Registration page

1. Preliminary work:

  • First remove the default content in the project, helloWorld
  • Create new views file under SRC, which mainly writes pages of each function module.
  • First, create a Register file in the views file, and create a register. vue file in the Register file directory. This file mainly do the development of the registration page

The register.js file is created in the Router folder. This takes advantage of route lazy loading. JavaScript packages can become very large when the application is packaged to build, affecting page loading. It would be much more efficient if we could split the components corresponding to different routes into different code blocks and then load the components only when the routes are accessed.

export default {
    name:'register',
    path:'/register',
    component:()=>import('@/views/Register/Register.vue')
}
Copy the code

Add register to index.js in route folder.

import Vue from 'vue'
import Router from 'vue-router'
import  register from './register'

Vue.use(Router)
const routes=[
  register
]
const router=new Router({
  mode: 'history',
  routes
})

export default router
Copy the code

2. Page development

The registration page is as follows: it can be divided into three parts: title header, input box and button. The header layout of the registration and landing pages is similar and can be extracted as components.

We can divide the header into three sections, with headings in the middle and left and right reserved for later adding other functions, using Flex layout.

The main header code is as follows:

This project mainly uses VW to realize the adaptive layout. We can automatically convert PX to VW with the help of the “Px-to-VW” plug-in of VScode

<template> <div> <van-field v-model="content" :label="label" :placeholder="placeholder" :type="type"/> </div> </template> <script> export default { props:['label','placeholder','type'], data(){ return{ content:'' } }, $emit('contentWatch',this.content)}} </script> <style> </style>Copy the code

The register.vue code is as follows

<template> <div class="register"> <login-top middleTop="bilibili"></login-top> <login-text style="margin:4.167vw 0" @contentWatch="res=> registerinfo. name=res" /> <login-text label=" placeholder "placeholder=" @contentwatch ="res=> registerinfo.username =res" /> <login-text label=" placeholder "placeholder=" placeholder" type="password" @contentwatch ="res=> registerinfo.password =res" /> <login-btn btntext=" register "@textClick ="registerSubmit"></login-btn> </div> </template> <script> import LoginTop from '@/components/Login/LoginTop.vue' import LoginText from '@/components/Login/LoginText.vue' import LoginBtn from '@/components/Login/LoginBtn.vue' export default { data(){ return{ registerInfo:{ name:'', username:'', password:'' } } }, components:{ LoginTop, LoginText, LoginBtn }, Methods :{async registerSubmit(){let {name,username,password}= this.registerinfo let rulg = /^.{4,16}$/ If (/ ^. {1,} $/. The test (name) && rulg. Test (username) && rulg. Test (password)) {const res = await This.$http.post('/register', this.registerinfo) console.log(res) if(res.data.code==200){this.$msg.fail(' register successfully ') // Store the token of the returned ID locally, Localstorage.setitem ('id',res.data.id) localStorage.setitem ('token',res.data.objtoken) localStorage.setitem ('token',res.data.objtoken) Console. log(localStorage) // After successful registration, SetTimeout (() => {this.$router.push('/userinfo')}, 2000)}else if(res.data.code==302){this.$MSG. Fail (res.data.msg)}}else{this.$MSG. ') } }, } } </script> <style > </style>Copy the code

Summary of knowledge points:

1. One-way data flow

All prop forms a one-way downlink binding between their parent prop: updates to the parent prop flow down to the child, but not the other way around. This prevents accidental changes in the state of the parent component from the child, which can make the data flow of your application difficult to understand.

2. Props can be arrays or objects that receive data from the parent component. Props can be a simple array, or instead, objects allow you to configure advanced options such as type checking, custom validation, and setting defaults.

3. Watch Watch monitors data changes in data.

4. When the child component needs to communicate with the parent component, for example, when we pull out the input box from the component, we need to throw the value of the input box to the parent component Register for the registration interface call

LoginText <van-field V-model ="content" :label="label" :placeholder="placeholder" :type="type" $emit('contentWatch',this.content) The parent listens for the contentWatch event thrown by the child. <login-text label=" account" Placeholder =" @contentwatch ="res=> registerinfo.username =res" />Copy the code

This article uses the History mode of routing, which makes full use of the history.pushState API to redirect urls without reloading the page.

Const router=new router ({mode: 'history', routes //(routes: routes}))Copy the code

6. Lazy route loading

JavaScript packages can become very large when packaged to build applications, affecting page loads. It would be much more efficient if we could split the components corresponding to different routes into different code blocks and then load the components only when the routes are accessed. Combined with Vue’s asynchronous component and Webpack’s code segmentation function, the lazy loading of routing components can be easily realized.

3. Login page

The login page can reuse the registration page. Simply modify the page, remove the name input box, add padding to the account input box, and change the interface to /login. It can reuse more than 80% of the code, which is the advantage of components.

——– to be continued ——————-