Chapter 3 Getting started

preface

Sorry for the delay, but I try to ensure that time to stick to writing, and MY level is limited, welcome you to correct and beat brick. In the last chapter, you should have a sense of the structure of the project, so let’s start writing pages.

Some modifications to vue-CLI

Since we couldn’t fully meet the needs of the project with scaffolding, we had to add something more.

1. Install VUEX for status management

What is vuex? I’ll talk about it later

 npm install --save vuex
Copy the code

2. Install AxiOS

Vue – Resource is used for Ajax requests, but vue officially does not maintain it, and axios is recommended.

 npm install --save axios
Copy the code

Code specification

As a qualified front-end engineer, our code and the name must be standard, ahem, really this is not just to look good, but when we are on cooperative development, have someone else to take over your code, see a component name know at a glance is used to do, it will reach our goal. For example, the welcome component in scaffolding, HelloWorld.vue, is named in a camel’s back.

The login page

Enter a background management system, first login, now start to develop a login page component. For maintenance purposes, we’ll use the Pages folder under SRC (if you don’t have one, make one yourself). Create a new directory user and create the login. vue file under that directory.

1. Configure routes

Before implementing it, we need to configure the route so that we can access the page. Add the newly created component to the route file SRC /router/index.js.

import Login from '@/pages/user/Login'// Import componentsexport default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login'// Route path name:'Login', // Route name Component: Login // imported component}]})Copy the code

At this point, open http://localhost:8080/#/login in your browser and you will get to this page.

2, to start work

Open the newly created login. vue and start coding. It is important to note that only one child node can be contained in each template

<template> <div>... </div> </template> </div> <div>... </div> </template>Copy the code

Direct paste code, suggest you hand – written ah, deepen the impression.

<template>
    <div class="login_page">
        <section class="form_contianer">
            <div class="manage_tip"> <p> First backend management system </p> </div> <el-form> <el-form-item prop="username">
			<el-input placeholder="Username"><span>dsfsf</span></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" placeholder="Password" ></el-input>
		</el-form-item>
        	<el-form-item>
		    <el-button type="primary" class="submit_btn"> log in < / el - button > < / el - form - item > < / el - form > < section > < / div > < / template > < script >export default {
  
}
</script>
<style scoped>
  @import '.. /.. /assets/css/login.css';
</style>
Copy the code

CSS styles are placed separately under assets and then introduced as components

//login.css
body,html{
    width: 100%;
    height: 100%;
    margin: 0;
}
.el-menu{
    border: none;
}
.login_page{
    background: # 324057;
    width: 100%;
    height: 100%;
}
.form_contianer {
    width: 320px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -180px;
    padding: 25px;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
}
Copy the code

Now that the page style is ok, isn’t it easy lol?

is the Element component tag, which already provides us with a basic UI that you can simply customize. See the Element UI website for details. On the style tag, there is a scoped property that limits the scope of the style. This means that any styles you write in this component will only apply to your component and not to other components. The completed page is as follows:

src/App.vue 

body,html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  height: 100%;
}
Copy the code

conclusion

In the next section, we will continue to complete the login page, including the request interface and login logic. Later, I will deploy all the code on Github, and you can clone it directly.

All chapters

  • Chapter I Installation of Scaffolding
  • Chapter two: Initial experience
  • Chapter 3 Login page
  • The fourth chapter axios
  • Chapter 5: Routing hook and plug-in development