Novice vue small project (login page)

ja I. start

1. Install node

2. Scaffold installation

  1.     npm install -g @vue/cli     (Global installation)
  2. . use vue -V to query the version   (Note: - V)     V must be in uppercase) if found, it indicates that the installation is successful

3. Create project

  1. Use the command line cd create name
  2. Based on graphical vue ui
  3.   2.x old template mode (NPM install - M @ Vue / cli init)       Then Vue init (webpack name)

3. Configure routing

4. Configure the element UI and install it in the plug-in. If the graphical method is used, search Vue client plugin element version: 1.0.1

5. Configure axios: install in dependencies, search for axios (run dependencies)

6. Initialize git warehouse

  1. Account Avatar - drop-down menu - Settings - left sidebar (ssh) public key - how to generate public key - warehouse management - generate / add public key
  2. In the global command line, select a global variable   The code of each new warehouse is different
    git config --global user.name "xxl1314"
    git config --global user.email "9704099+xxl1314@user.noreply.gitee.com"

  3. Initialize warehouse   git init
  4. Submit all files git add
  5. Upload to local   git commit -m "add files" / / file description in quotation marks
  6.   There are two more steps to look at the code on gitee. The code of each new warehouse is different
    git remote add origin https://gitee.com/xxl1314/vue_pro.git
    git push -u origin master

7. Hosting local projects in github or code cloud (source code management)

8. Import database (take me as an example)

  1. Open the small P to open the database - install phpmyadmin 4.8.5 in software management - Open phpmyadmin in the home page   --- Import the database to be imported -- create a database in phpmyadmin with the same name as the database to be imported

    The code is: utf8_general_ci

  2. Put Vue_ api_ Open the server on the terminal and run npm install to install the dependency

    Then run node app.js

    Test the interface in postman

2, Layout of login page

  1. Before writing code, you should first determine whether the current environment is clean, that is, whether the status of the project is clean       git status
  2. After confirming that the current working directory is clean, create a branch for development, and merge it into the master after development         git checkout -b login; //   Create a branch. Login is the branch name
  3. Then view the newly created branch       git branch;// View all branches. The one with an asterisk is the branch of the current operation

The preparations are finished

effect

Code main.jsj

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// Introducing a global style sheet
import "./assets/css/global.css"
import "./assets/fonts/iconfont.css"


Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

index.js

import Vue from 'vue'
import Router from 'vue-router'
// Introduce login component
import login from '../components/login.vue'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        redirect: "/login"
    }, {
        path: '/login',
        component: login
    }]
})

  Create a new CSS folder in assets   Build a global.css (only this name)

/* The global style sheet can only be called this name */

html,
body,
#app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: darkgray;
}

app.vue

<template>
  <div id="app">
    <!-- Route placeholder -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app",
};
</script>

<style>
</style>

element.js

import Vue from 'vue'
import { Button } from 'element-ui'
// Import required Form FormItem Input
import { Form, FormItem } from 'element-ui'

import { Input } from 'element-ui'
//Group test becomes a global component
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

  Delete the components and create a new login.vue

<template>
  <div class="login_connter">
    <!-- Login -->
    <div class="login_left">
      <h2>New user registration</h2>
     
      <el-form label-width="0px"  class="login_form" :rules="loginFormRules"  :model="loginForm"> 
        <!-- user name -->
        <el-form-item prop='name'>
          <el-input  v-model="loginForm.name"
            prefix-icon="iconfont icon-user" placeholder="Please enter a name"></el-input>
        </el-form-item>
        
        <!-- Verification Code -->
         <el-form-item  class="login_yanzheng">
          <el-input placeholder="Please enter the verification code"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="info">Get verification code</el-button>
        </el-form-item>

        <!-- password -->
        <el-form-item prop='password'>
          <el-input v-model="loginForm.password"
            type="password"
            prefix-icon="iconfont icon-3702mima" placeholder="Please input a password"></el-input>
        </el-form-item>
        <!-- password -->
        <el-form-item prop='passwords'>
          <el-input v-model="loginForm.passwords"
            type="password"
            prefix-icon="iconfont icon-3702mima" placeholder="Please confirm the password"></el-input>
        </el-form-item>
        <!-- Button -->
        <el-form-item class="btns">
          <el-button type="primary" >Register now</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
       loginForm: {
        username: "",
        password: "",
         passwords: "",
      },
      loginFormRules: {
           name: [
            { required: true, message: 'Please enter login name', trigger: 'blur' },
            { min: 3, max: 5, message: 'The length is between 3 and 5 characters', trigger: 'blur' }
          ],
           password: [
            { required: true, message: 'Please input a password', trigger: 'blur' },
            { min: 6, max: 15, message: 'The length is between 6 and 15 characters', trigger: 'blur' }
          ],
           passwords: [
            { required: true, message: 'Please input a password', trigger: 'blur' },
            { min: 6, max: 15, message: 'The length is between 6 and 15 characters', trigger: 'blur' }
          ],
      },
    };
  },
};
</script>


<style >
.login_connter {
  width: 950px;
  height: 570px;
  background-color: #fff;
  background-image: url(../assets/bg.png);
  background-size: cover;
  margin: 50px auto;
}
.login_left {
  width: 375px;
  height: 100%;
  background-color: #fff;
  position: relative;
}
h2 {
  text-align: center;
  position: absolute;
 top: 30px;
 left: 35%;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.btn{
  position: absolute;
  top: 60px;
  left: 210px;
}
.login_form{
  position: absolute;
 top: 100px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.login_yanzheng{
  width: 150px;
}
</style>

The layout has been realized, but the function has not been done yet  

Tags: Javascript html5 Vue.js

Posted on Sat, 11 Sep 2021 20:09:44 -0400 by arnihr