Vue+Element UI Front End Development Instance Record


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:

Modify npm to use Taobao mirror source

npm config set registry --global  
npm config set disturl --global

Install yarn

Much better than npm, faster than lost!

npm install yarn -g

Configuring yarn also uses Taobao mirrors:

yarn config set registry

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:

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:

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


File structure:

G:\Python_projects\vue_study\frontend\src>tree /f
 Folder PATH List for Volume WORK
 Volume serial number 102C-0B5A
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
 (f) index.js) Routing Definition
        Login.vue login page


  <div id="app">



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

new Vue({
  render: h => h(App)


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

  export default {
    name: 'Login',
    data: function () {
      return {
        form: {
          username: '',
          password: '',

<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%;


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


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

const router = new VueRouter({

export default router


    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