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

vlambda
2021-02-06

[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

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

这里提示了默认前端访问路径是 http://localhost:8080，打开看一下效果。
[20210111]用 ElementUI For Vue 搭建一个动态提交表单工具 - Web端 - 开发日志 - 第 1 天
OK，这样就是安装成功了

2 引入 ElementUI 组件

接下来打开 element-ui 的官网，看一下推荐部署。传送门：https://element.eleme.cn/#/zh-CN/component/installation
[20210111]用 ElementUI For Vue 搭建一个动态提交表单工具 - Web端 - 开发日志 - 第 1 天

cd web-projectnpm i element-ui -S

安装完组件后，再看看推荐引入的方法

[20210111]用 ElementUI For Vue 搭建一个动态提交表单工具 - Web端 - 开发日志 - 第 1 天
打开 web-project\src\main.js，编辑配置代码

3 引入 Vuescroll 组件

在滚动条方面，Yogurt 不太喜欢浏览器自带的，所以找到了一个开源的滚动条的 Vue 组件。传送门：https://vuescrolljs.yvescoding.org/zh/guide/getting-started.html#%E5%AE%89%E8%A3%85
[20210111]用 ElementUI For Vue 搭建一个动态提交表单工具 - Web端 - 开发日志 - 第 1 天

cd web-projectnpm i vuescroll -S

打开 web-project\src\main.js，编辑配置代码

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

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.pushRouter.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>

vlambda博客
学习文章列表