十次方前端系统开发v1.0--第3章(1).pdf

第3章-使用ElementUI开发管理后台-1 学习目标： 掌握elementUI提供的脚手架搭建管理后台的方法 掌握elementUI的table组件的使用，实现列表功能 掌握elementUI的pagination组件的使用，实现分页功能 掌握elementUI的form相关组件的使用，实现条件查询功能 掌握elementUI的dialog组件和$message的使用，实现弹出窗口和消息提示功能 掌握elementUI的select组件的使用，实现下拉列表功能 实现新增数据和修改数据的功能 掌握confirm的使用，实现询问框，实现删除功能 1 管理后台搭建 我们的十次方管理后台就采用ElementUI来进行搭建. 1.1 什么是ElementUI Element 饿了么前端出品的一套 Vue.j s 后台组件库 官网： http://element.eleme.io/#/zh-CN   1.2 神奇的脚手架 1.2.1 快速搭建 官网上提供了非常基础的脚手架，如果我们使用官网的脚手架需要自己写很多代码 比如登陆界面、主界面菜单等内容。 课程已经提供了功能完整的脚手架，我们可以拿过 来在此基础上开发，这样可以极大节省我们开发的时间。 （1）解压vueAdmin-template-master （2 ）在命令提示符进入该目录，输入命令： cnpm install 这样下载安装所有的依赖，几分钟后下载完成。 （3 ）输入命令： npm run dev 运行后自动弹出浏览器。 1.2.2 了解工程结构 以下是主要的目录结构： 目录名称 存储内容 build 构建工程相关脚本 config 配置相关 src 工程源码 static 静态资源 src/api 访问后端A PI src/utils 工具类 src/views 页面 src/router 路由 1.3 项目初始化 1.3.1 关闭语法规范性检查 修改config/index.j s ，将useEslint 的值改为false。 此配置作用: 是否开启语法检查，语法检查是通过ESLint 来实现的。 我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具，可以 用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它 非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写 分号等等，这些规则其实是可以设置的。我们作为前端的初学者，最好先关闭这种校 验，否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开 启。 1.3.2 国际化设置