前言
本次分享的对象面向非专业前端的开发人员，如测试/后端等有时需要自己完成前端页面，其对前端技术不需深入了解，只需要可以根据文档快速开发前端页面的。所以这次分享的内容技术细节不去细究，只分享快速搭建前端项目的方法。
本次分享的内容是基于Vue(2.x) + Element-ui快速搭建前端页面的经验分享，本次分享会通过搭建一个表单页来演示整个创建过程。
通过这次分享，将从以下几点介绍：
* 环境搭建
* 快速创建vue项目
* 路由配置
* 目录结构介绍
* 创建页面
* elementui 表单相关组件的应用
* 联动
环境搭建
通过Vue CLI工具来快速创建Vue项目
首先安装Vue CLI (前提是已安装Node环境)
npm install -g @vue/cli
安装完毕后通过命令查看其版本检查是否安装成功：
vue --version
快速创建vue项目
通过Vue CLI工具快速创建一个vue项目
vue create form-demo（要创建的项目名称）
一路默认操作 执行完毕后 进入form-demo目录
cd form-demo
Element，一套基于 Vue的桌面端组件库,其提供了丰富的UI组件，使开发前端页面事半功倍。
安装elementui
vue add element
同样一路勾选默认即可
安装完之后 我们可以看到目录中多了一个plugins文件夹
里面有一个element.js来存放element注册为全局组件的配置
如下
然后我们来运行验证一下
npm run serve
注: 具体执行什么命令来启动服务 可以查看项目根目录下的package.json文件中的scripts配置
通过 npm run *来执行 server(启动) buld(打包)等服务
执行完成后，控制台会显示前端页面预览地址
浏览器打开页面 如下展示
当看到页面上正常显示element按钮时 说明我们前面的配置已经成功了
路由配置
接下来会有疑问？ 如果我有很多页面怎么访问呢？
这就引出了前端路由 vue-router
Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
安装vue-router
vue add router
安装完毕后，无需其他配置，目录会多了一个router文件夹
里面的index.js用来存放路由配置
在index.js中发现了如下配置
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
我们通过浏览器访问http://localhost:8080/about来验证路由是否安装成功
about页面可以正常访问，说明我们所有的配置都生效了
目录结构介绍
vue项目开发的目录结构需要容易理解并方便构建与管理，方便日后的维护和其他同事的阅读。
前端开发的目录主要在src目录下
components目录主要存放一些公用的组件(比如上传组件、二次封装的弹窗组件等)router目录存放路由相关的配置views存放页面视图(页面视图也可以有如下规范)
└─views
├─ course // 课程文件夹
│ ├─ index.vue // 课程视图的入口
│ ├─ assets // 课程页面引用到的静态资源(图片)
│ └─ icon.png
│ ├─ components // 课程页面独有的组件文件夹
│ └─ Subject.vue // 学科组件 会被index.vue引用 组件首字母需要大写
├─ demo // demo页面文件夹
└─ index.vue // demo页面入口
...
App.vue是主组件，页面的入口文件，所有页面都是在App.vue下进行切换的main.js程序入口文件，初始化vue实例，并引入需要的插件和组件(比如element/vue-router)都是在main.js里注册
创建页面
对目录结构有一定了解之后，接下来我们来创建一个我们自己的页面
首先我们在views 目录下创建一个course（课程）文件夹
再建一个index.vue文件
<template>
<div>
测试
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
这是一个最基本的页面结构
template 里存放页面模板，通过数据驱动视图更新
script里面存放具体业务相关的数据和逻辑处理
style 里存放页面的相关样式
注: template 只能有一个子元素，不然编译会报错。其他元素可以嵌入在这个子元素里。
课程页面创建之后，怎么去访问呢？
这就需要去配置页面路由
打开 /views/router/index.js
首先需要将课程视图(页面)引入进来
import Course from '../views/course'
通过import的方式按路径找到课程页面，引入进来（若页面视图是在文件夹下以index.vue命名，只需要引入到文件夹一级即可，若其他命名，需要引入到.vue文件）
引入之后，需要在routes中配置具体的路由信息:
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/course',
name: 'Course',
component: Course
}
]
其中：
path 是访问的路径
name页面的name,页面的跳转除了通过path跳转，也可通过name进行跳转(具体可参考vue-router文档)
component 视图组件，上面引入的课程视图
配置完成之后，通过访问http://localhost:8080/course 看是否成功
看到我们的页面内容正确显示出来，说明路由配置成功了
我们再来看下App.vue页面
刚才说过App.vue是项目的根组件，所有页面都是在此切换
element表单组件应用
一个简单的页面我们已经创建出来了，接下来我们想创建一个表单页面，其中包括文本框，单选框，下拉菜单，提交按钮等元素。以及需要根据不同的选项进行联动处理。
根据element-ui的文档，我们可以写出一个完美的表单：
<template>
<div class="container">
<div class="title">创建课程</div>
<el-form ref="form" class="create-course" :model="form" label-width="140px">
<el-form-item label="课程名称: ">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年级: ">
<el-radio-group v-model="form.grade">
<el-radio :label="1">大一</el-radio>
<el-radio :label="2">大二</el-radio>
<el-radio :label="3">大三</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="学科">
<el-select v-model="form.subject" placeholder="请选择学科">
<el-option label="高数" value="gaoshu"></el-option>
<el-option label="英语" value="yingyu"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
grade: '',
subject: ''
}
}
},
methods: {
onSubmit() {
console.log('提交')
}
}
}
</script>
<style scoped>
.container {
width: 900px;
border: solid 1px #ccc;
margin: 0 auto;
text-align: left;
}
.title {
line-height: 42px;
padding-left: 24px;
margin-bottom: 20px;
border-bottom: solid 1px #ccc;
text-align: left;
}
.create-course {
padding: 24px 200px 24px 0;
}
</style>
因先前已经在main.js里全局注册过element组件，所以我们在页面里可以直接引用element组件，而不需要单独在页面里引入
在处理具体的业务逻辑之前，先简单了解一下Vue的双向数据绑定
数据驱动是Vue的最大特点，简单理解就是当data改变时，视图会随之改变，开发者不需要修改dom,并且页面也不会刷新。对应当视图发生改变时(如文本框内容)，同样与之绑定的data数据也会改变。
vue的数据双向绑定主要通过对数据进行劫持以及发布者-订阅模式来实现的，这点不用深究，知道即可。
接下来，我们需要在课程页面添加具体的业务逻辑，需要实现以下几点：
- 将年级、学科的数据放在data中，模板通过循环渲染，增加灵活性
- 学科默认隐藏，根据选中不同的年级展示不同的学科列表
- 提交表单时，对课程名称、年级、学科进行必填项校验，校验同提交表单
年级、学科数据放在data中,默认隐藏学科
在data中增加年级列表字段gradeList、学科列表字段subjectList
gradeList: [
{
id: 1,
name: '大一'
},
{
id: 2,
name: '大二'
},
{
id: 3,
name: '大三'
}
],
isShowSubject: false,
subjectList: []
在模板中通过v-for动态渲染年级列表、学科列表
<el-form-item label="年级: ">
<el-radio-group v-model="form.grade">
<el-radio v-for="item in gradeList" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="isShowSubject" label="学科">
<el-select v-model="form.subject" placeholder="请选择学科">
<el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
循环需要用v-for进行遍历，并且循环时需要绑定key
如果要隐藏某一项，只需要在v-if设置为false即可
根据选中不同的年级展示不同的学科列表
<el-form-item label="年级: ">
<el-radio-group v-model="form.grade" @change="handleChangeGrade">
<el-radio v-for="item in gradeList" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
首先要监听年级的change事件，拿到当前的年级id，然后根据不同的id去为学科列表赋值，并显示学科列表
// methods 方法里
// 切换年级
handleChangeGrade(id) {
this.form.subject = '' // 每次切换年级时 清空已选中的学科
if (id === 1) { // 根据不同的年假id 为学科赋不同值
this.subjectList = [
{
id: 11,
name: '高数'
},
{
id: 12,
name: '英语'
},
{
id: 13,
name: '线性代数'
}
]
} else if(id === 2) {
this.subjectList = [
{
id: 21,
name: '计算机网络'
},
{
id: 22,
name: 'C++'
},
{
id: 23,
name: 'Java'
},
{
id: 24,
name: '操作系统'
}
]
} else {
this.subjectList = [
{
id: 31,
name: '数据结构'
},
{
id: 32,
name: '汇编'
}
]
}
this.isShowSubject = true // 将隐藏的学科显示出来
}
}
这样就实现了一个联动效果，根据不同的选择展示不同的内容
联动的本质就是 监听选项变化，并根据不同的选项为需要联动的内容赋不同的值，通过数据驱动视图更新，达到联动效果。
提交表单并校验
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
<el-form ref="form" :rules="rules" class="create-course" :model="form" label-width="140px">
<el-form-item label="课程名称: " prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年级: " prop="grade">
<el-radio-group v-model="form.grade" @change="handleChangeGrade">
<el-radio v-for="item in gradeList" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="isShowSubject" label="学科" prop="subject">
<el-select v-model="form.subject" placeholder="请选择学科">
<el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
// data里增加rules规则
rules: {
name: [
{ required: true, message: '请输入课程名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
grade: [
{ required: true, message: '请选择年级', trigger: 'change' }
],
subject: [
{ required: true, message: '请选择年级', trigger: 'change' }
]
}
// methods里提交校验
onSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
})
}
以上只是简单的校验规则，还可以自定义比较复杂的校验规则，具体用法可以参考官方文档有详细说明
总结
通过这次分享，希望大家对快速创建一个前端项目，并对配置路由和表单的简单操作有个初步的认识。当然vue还有很多强大的功能，比如数据管理，异步请求接口的封装，过滤器，自定义组件等。虽然我们不必像专业前端一样深入研究，知其所以然，尽量去了解Vue的一些开发机制，避免让前端页面成为开发上的瓶颈。
希望大家有所收获，感谢~
