Vue+Element UI Front End Development Instance Record

Preface

I've been trying to learn Vue systematically. These days I'm fighting the epidemic at home and charging it. Record the process of developing a basic system login interface.

Environmental preparation

Install Node.js(npm)

Official download install LTS version:
https://nodejs.org/en/download/

Modify npm to use Taobao mirror source

npm config set registry https://registry.npm.taobao.org --global  
npm config set disturl https://npm.taobao.org/dist --global

Install yarn

Much better than npm, faster than lost!

npm install yarn -g

Configuring yarn also uses Taobao mirrors:

yarn config set registry https://registry.npm.taobao.org

Install Vue CLI Scaffolding Tool

yarn global add @vue/cli
vue --version
# @vue/cli 4.2.2

If the vue command cannot be invoked directly from the command line after installation, the following path needs to be manually added to the system PATH environment variable:
%userprofile%\AppData\Local\Yarn\bin

Create Vue Project

vue create frontend		# frontend is the project folder name

Select Manually manual wizard to create project, note feature selection Babel Router Linter

Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn

Start development server

cd frontend
yarn serve

Visit http://localhost:8080 with a browser to see the default page for Vue

[Optional] Manage Vue projects using a visual interface

vue ui

The Vue project can be managed in the browser

Install Element UI

Official Documents:
https://element.eleme.cn/#/zh-CN/component/installation

The frontend folder location created above (at the same level as the package.json file) executes the following commands:

yarn add element-ui

Install additional dependencies (packages)

yarn add axios less less-loader

Code

File structure:

G:\Python_projects\vue_study\frontend\src>tree /f
 Folder PATH List for Volume WORK
 Volume serial number 102C-0B5A
G:.
Single Page Application Single Page Main Entry Vue Object
 main.js Main JS Entry to reference routes, Element UI modules, global css style files, initialize Vue object definitions
│
-assets Static Resource Directory
 global.css global style sheet
 logo.png
│
├─router
 (f) index.js) Routing Definition
│
└─views
        Login.vue login page

App.vue

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

<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// Introducing ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // Note that css files need to be introduced separately
// Introducing a global style sheet
import './assets/global.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

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

views/Login.vue

<template>
  <div class="login_box">
    <!--Head portrait-->
    <div class="avatar">
      <img src="@/assets/logo.png">
    </div>
    <!--form-->
    <el-form ref="loginFormRef" :model="form">
      <el-form-item>
        <el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="enter one user name"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="Please input a password" type="password"/>
      </el-form-item>
      <el-form-item>
        <el-row class="login_btns" :gutter="10">
          <el-col :span="6">
            <el-button type="primary">Sign in</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="default">cancel</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data: function () {
      return {
        form: {
          username: '',
          password: '',
        },
      }
    },
  }
</script>

<style lang="less" scoped>
  .login_box {
    width: 400px;
    height: 200px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 100px;
    background-color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: #FFFFFF;
    padding: 10px;
    box-shadow: 0 0 10px #ccc;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -220px);

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .login_btns {
    display: flex;
    justify-content: center;

    button {
      width: 100%;
    }
  }
</style>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

assets/global.css

body{
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #41b883;
}
193 original articles were published. 90 were praised. 430,000 visits were received+
His message board follow

Tags: Vue npm less JSON

Posted on Wed, 12 Feb 2020 16:46:31 -0800 by tsabar