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-projectnpm 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-projectnpm 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: ''})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
<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> 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>以上就是第 1 天里准备的内容了
