[20210111]用 ElementUI For Vue 搭建一个动态提交表单工具 - Web端 - 开发日志 - 第 1 天

0 前言

这两天 Yogurt 的部门成员开始提出离职，临过年了，来年祝好吧。但是在新的成员加入之前，一些需求单的处理就都要暂时归 Yogurt 来负责了。但 Yogurt 终归是一个人，没有三头六臂，万一后面需求多了，自己记不过来那就太耽误事了。所以想着开发个动态提交表单的工具，过了年来就可以用了。时间不多不少 1 个月，晚上抽点时间来做开发，加上春节，应该来得及。

Web 端用 ElementUI For Vue 来进行搭建，时间有限，尝试尽可能全部使用 ElementUI 的组件来开发，减少自写代码量。

1 创建项目

Vue 和 Node.js 的安装就不说了，直接进入主题。

# vue init webpack [项目名]
vue init webpack web-project

? Project name [项目名]
? Project description [项目说明]
? Author [开发者]
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes 
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

等待下载完成就好。

运行看看。

npm run dev

在这里插入图片描述
这里提示了默认前端访问路径是 http://localhost:8080，打开看一下效果。

OK，这样就是安装成功了

2 引入 ElementUI 组件

接下来打开 element-ui 的官网，看一下推荐部署。传送门：https://element.eleme.cn/#/zh-CN/component/installation
在这里插入图片描述

cd web-project
npm i element-ui -S

安装完组件后，再看看推荐引入的方法
在这里插入图片描述
打开 web-project\src\main.js，编辑配置代码

3 引入 Vuescroll 组件

在滚动条方面，Yogurt 不太喜欢浏览器自带的，所以找到了一个开源的滚动条的 Vue 组件。传送门：https://vuescrolljs.yvescoding.org/zh/guide/getting-started.html#%E5%AE%89%E8%A3%85
在这里插入图片描述

cd web-project
npm i vuescroll -S

打开 web-project\src\main.js，编辑配置代码
在这里插入图片描述

4 引入 vue-resource

因为这是一个前后端分离的项目，因此需要引入 http 框架，这里用的是 vue-resource

npm i vue-resource -S

打开 web-project\src\router\index.js，编写配置代码在这里插入图片描述
到此，所有要准备的配置都好了。

所有配置代码如下：

4.1 `web-project\src\main.js`

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

/* --- create: 2021-01-11 22:39 Yogurt_cry --- */
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

/* --- create: 2021-01-11 22:49 Yogurt_cry --- */
import vuescroll from 'vuescroll'

// router 一定要在引用的组件之后
import router from './router'

/* --- create: 2021-01-11 22:39 Yogurt_cry --- */
Vue.use(ElementUI)

/* --- create: 2021-01-11 22:49 Yogurt_cry --- */
Vue.use(vuescroll, {
    
    
  ops: {
    
    
    bar: {
    
    
      background: 'rgba(144, 147, 153, 0.5)'
    }
  }, // 在这里设置全局默认配置
  name: 'vueScroll' // 在这里自定义组件名字，默认是vueScroll
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  components: {
    
     App },
  template: '<App/>'
})

4.2 `web-project\src\router\index.js`

import Vue from 'vue'
import Router from 'vue-router'

/* --- create: 2021-01-11 23:09 Yogurt_cry --- */
import VueResource from 'vue-resource'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

/* 2021-01-11 23:09 Yogurt_cry 解决相同路径跳转报错的异常 */
const routerPush = Router.prototype.push
Router.prototype.push = function push (location) {
    
    
  return routerPush.call(this, location).catch(error => error)
}

/* --- create: 2021-01-11 23:09 Yogurt_cry --- */
Vue.use(VueResource)

export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

5 一些个人喜好的设置

打开 web-project\src\App.vue ，对一些公共样式进行一些喜好设置，这部分看个人喜好。

5.1 `web-project\index.html`

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Yogurt_cry 的需求管理工具</title>

    <!-- 设置全局样式 -->
    <style>
      /* 页面 */
      html, body {
     
     
        min-width: 1200px;
        min-height: 800px;
        margin: 0;
        padding: 0;
        font-family: 'Consolas', '微软雅黑', monospace, 'Microsoft YaHei';
        font-size: 14px;
      }
      /* 段落 */
      p {
     
     
        margin: 0;
        padding: 0;
        line-height: 0;
      }
      /* 列表 */
      ul, li {
     
     
        list-style: none;
        margin: 0;
        padding: 0;
      }
      /* 滚动条 */
      ::-webkit-scrollbar {
     
     
        width: 6px;
        height: 8px;
      }
      /* 控件框 */
      button, input, select, textarea {
     
     
        font-family: 'Microsoft YaHei', '微软雅黑';
        font-size: 14px;
      }
      /* 表格滚动条样式 */
      .el-table__body-wrapper::-webkit-scrollbar {
     
     
        width: 6px;
        height: 8px;
      }
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
     
     
        border-radius: 4px;
        background-color: rgba(144, 147, 153, 0.5);
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5.2 `web-project\src\App.vue`

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
     
     
  name: 'App'
}
</script>

<style>
#app {
     
     
  font-family: 'Consolas', '微软雅黑', monospace, 'Microsoft YaHei';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* 去掉 element-ui 打开抽屉时自动选中标题时的蓝色边框 */
.el-drawer:focus {
     
     
  outline: 0;
}
.el-drawer__header span:focus {
     
     
  outline: 0;
}
</style>