Vue+Element UI前端开发实例记录

序言

一直想系统的学一下Vue来着,这几天在家抗疫,正好充充电.记录一下开发一个基础的系统登录界面过程.

环境准备

安装Node.js(npm)

官网下载安装LTS版本:
https://nodejs.org/en/download/

修改npm使用淘宝镜像源

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

安装yarn

比npm好用多了,速度快的那不止一丢丢!

npm install yarn -g

配置yarn也使用淘宝镜像:

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

安装Vue CLI脚手架工具

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

安装完成后如果直接在命令行中无法调用vue命令,则需要手动在系统PATH环境变量中增加下面的路径:
%userprofile%\AppData\Local\Yarn\bin

创建Vue项目

vue create frontend		# frontend为项目文件夹名称

选择Manually手动向导创建项目,注意功能选择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

启动开发服务器

cd frontend
yarn serve

使用浏览器访问http://localhost:8080即可看到Vue的默认页面

[可选]使用可视化界面管理Vue项目

vue ui

在浏览器中可以对Vue项目进行管理

安装Element UI

官网文档:
https://element.eleme.cn/#/zh-CN/component/installation

在上面创建好的frontend文件夹位置(与package.json文件同级别)执行下面命令:

yarn add element-ui

安装其他依赖(包)

yarn add axios less less-loader

撸代码

文件结构:

G:\Python_projects\vue_study\frontend\src>tree /f
卷 WORK 的文件夹 PATH 列表
卷序列号为 102C-0B5A
G:.
│  App.vue		SPA(Single Page Application)单页面主入口Vue对象
│  main.js		主js入口,用来引用路由,Element UI模块,全局css样式文件,初始化Vue对象定义
│
├─assets		静态资源目录
│      global.css	全局样式表
│      logo.png		头像图片
│
├─router
│      index.js		路由定义
│
└─views
        Login.vue	登录页面

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'
// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 注意需要单独引入css文件
// 引入全局样式表
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">
    <!--头像-->
    <div class="avatar">
      <img src="@/assets/logo.png">
    </div>
    <!--表单-->
    <el-form ref="loginFormRef" :model="form">
      <el-form-item>
        <el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" type="password"/>
      </el-form-item>
      <el-form-item>
        <el-row class="login_btns" :gutter="10">
          <el-col :span="6">
            <el-button type="primary">登录</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="default">取消</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;
}