1、猛叔 okman VUEJS渐进式开发 日期 说明 20171126 创建， html/bootstrap/vue菜单效果 20171127 Vue菜单模板化 20171128 从后台获取 json数组并在前台生成菜单 20180109 调整顺序，优化代码 待定 抽取单独文件 单页应用 修订历史 目录 需求 Input Next Vue.js基础 Specification 4.模板 Flat 5.指令 Responsive 2.渐进实现 StepbyStep 1.项目 Project 入门 design philosophy 3.对比 vs Angular/REACT 进阶 implemen
2、tation 6.布局 Layout 8.公文版式 Document UI Component 7.组件 准备工作 下载： Bootstrap: https:/ https:/ jquery https:/ Vue.js https:/ 基本 HTML模板 Bootstrap 模板 Hello, world! 样本程序 12栅格和 24栅格两种栅格体系 1 2 3 4 5 6 7 8 9 10 11 12 http:/ 开始设计布局 比例： 2： 7： 3 第 0步：菜单设计 主菜单 1 子菜单 1 子 菜单 2 子 菜单 3 主菜 单 2 子菜单 1 子菜单 2 子菜单 3 主菜 单 n 子
3、菜单 1 子菜单 2 子菜单 3 设计要求 1、单击主菜单折叠 /显示子菜单 2、主菜单内容 /子菜单内容动态化 可以演示了，有一个 workable的软件！ 第 1步： Vue.js迭代生成菜单 item.name subItem.name new Vue( el:“#mainmenu“, data: items: name:公文 , isSubShow:false, subItems: name:收文 , name:来文 , name:起草 , name:会议管理 , isSubShow:false, subItems: name:会议 , name:会议室 , name:在线会议 , n
4、ame:消息 , isSubShow:false, subItems: name:1 , name:2 , name:3 , methods: showToggle:function(item) item.isSubShow = !item.isSubShow ) v-for：迭代，自动生成列表 click：单击主菜单项时的动作绑定 showToggle(item)动作处理函数 v-show：根据属性显示或隐藏 菜单数据 切换子菜单显示状态 待完善点 1、菜单项从后台传入，根据权限生成，不是静态写在页面中 2、菜单做成 VUE组件 3、点击一个主菜单项，展开子菜单同时，其他主菜单的子菜单项关闭
5、 4、菜单美化 依然可以演示，有一个 workable的软件！ 第 2步：从后台获取菜单数据 待完善点 1、菜单项从后台传入，根据权限生成，不是静态写在页面中 2、组件剥离为独立 VUE文件 3、点击一个主菜单项，展开子菜单同时，其他主菜单的子菜单项关闭 4、菜单美化 布局容器及模板不变 item.name subItem.name 菜单数据剥离到后台 未解决 bug，需要获取 2次数据。未解决点： 1、定义阶段， data中如何指定未生成的 json数据 2.Mounted阶段如何将取得的json数据传递给 data 始终有一个 workable的软件！ 第 3步：优化从后台获取菜单数据的过
6、程 布局容器及模板不变 菜单数据剥离到后台 var url = “./fakedata/left-nav.json“; vm = new Vue( el: “#mainmenu“, template: “#myMenu“, data: items:, mounted: function () let _self=this; $.getJSON(url, function (json) json = eval(res); _self.items = json.items; ) , methods: showToggle: function (item) item.isSubShow = !ite
7、m.isSubShow ) item.name subItem.name 始终有一个 workable的软件！ 第 4步：抽出模板 item.name subItem.name new Vue( el:“#mainmenu“, template:”#myMenu”, data: 定义模板 其他不变 v-for：迭代，自动生成列表 click：单击主菜单项时的动作绑定 showToggle(item)动作处理函数 v-show：根据属性显示或隐藏 指定模板 item.name subItem.name 其他不变 待完善点 1、菜单项从后台传入，根据权限生成，不是静态写在页面中 2、组件剥离为独立
8、 VUE文件 3、点击一个主菜单项，展开子菜单同时，其他主菜单的子菜单项关闭 4、菜单美化 始终有一个 workable的软件！ Demo2：项目桌牌！ 场景 业务：做桌牌 美工做法：一个一个 PS的做 挑战：如果要调整字体大小、颜色、背景怎么办？ 可选做法：用 WORD的 要求： 10分钟编写一个 VUE程序 美工去完善设计 美工维护 JSON数据 除了生成项目桌牌，还要生成项目清单 做法（ 10分钟搞定） 模板：扔给美工去美化 item.prj_name 项目经理： item.prj_manager item.prj_manager_mobile item.prj_member_numbe
9、r 行方经理： item.owner_manager item.owner_manager_phone item.owner_dept 合同时间： item.contract_date 合同人数： item.contract_member js：够用了 var url = “./fakedata/projects.json“; vm = new Vue( el: “#projects“, data: items: , mounted: function () _self = this; $.getJSON(url, function (res) json = eval(res); _self.
10、items = json.items; ) ) JSON数据定义，可以美工维护，也可 “items“: “prj_name“: “统一授权管理系统 “, “prj_manager“: “白因 “, “prj_manager_mobile“: “13910161532“, “prj_member_number“: “2“, “owner_manager“: “邓炬 “, “owner_manager_phone“: “010-88303633“, “owner_dept“: “开发测试中心综合业务处 “, “contract_date“: “2017-01-01“, “contract_memb
11、er“: “5“, “contract_1member“: “5“, “contract_member2“: “5“ , “prj_name“: “新 OA“, “prj_manager“: “吕建松 “, “prj_manager_mobile“: “13910161532“, “prj_member_number“: “2“, “owner_manager“: “邓炬 “, “owner_manager_phone“: “010-88303633“, “owner_dept“: “开发测试中心综合业务处 “, “contract_date“: “2017-01-01“, “contract
12、_member“: “5“ , “prj_name“: “助贷门户网站 “, “prj_manager“: “韩佳建 “, “prj_manager_mobile“: “13910161532“, “prj_member_number“: “2“, “owner_manager“: “邓炬 “, “owner_manager_phone“: “010-88303633“, “owner_dept“: “开发测试中心综合业务处 “, “contract_date“: “2017-01-01“, “contract_member“: “5“ 再生成表格 再做个视图即可，不需要改 JS，也不需要改数
13、据 项目名称 项目经理 手机 项目人数 行方经理 座机 部门 合同时间 合同人数 item.prj_name item.prj_manager item.prj_manager_mobile item.prj_member_number item.owner_manager item.owner_manager_phone item.owner_dept item.contract_date item.contract_member 高级主题 Vue.js 内置了 10 个 过滤器： capitalize ：字符串首字符转化成大写 uppercase ：字符串转化成大写 lowercase ：
14、字符串转化成小写 currency：参数 为 String 货币符号 ,Number 小数位 ，将数字转化成货币符号 ，并且 会自动添加数字分节号 。 pluralize：参数 为 String single, double, triple，字符串复数化 。 json 参数为 Numberindent 空格缩进数， 与 JSON.stringify() 作用相同，将 json对象 数据输出成符合 json 格式的字符串。 debounce 传入值必须是函数，参数可选， 为 Numberwait，即延时时 长 limitBy 传入值必须是数组，参数为 Numberlimit， Numberoff
15、set, limit 为 显示 个数， offset 为开始显示数组下标 。 filterBy 传入值必须是数组，参数为 String | Function targetStringOrFunction，即 需要匹配的字符串或函数（通过函数返回值为 true 或 false 来判断匹配结果）；“ in”（ 可选分隔符 ）； String searchKeys，为检索的属性区域 。 orderBy 传入值必须是数组，参数为 String|Array|FunctionsortKeys，即指定 排序策略 。这里可以使用单个键名，也可以传入包含多个排序键名的数组。也可以像Array.Sort()那样
16、传入自己的排序策略函数。第二个参数为可选参数 Stringorder，即选择升序或降序 ， order=0 为升序 ， order Project name (vuetest) 项目名称，可以自己指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错 Sorry, name can no longer contain capital letters），阮一峰老师博客 为什么文件名要小写 ，可以参考一下。 Project description (A Vue.js project) 项目描述，也可直接点击回车，使用默认名字 Author () 作者，不用说了，你想输什
17、么就输什么吧 接下来会让用户选择 Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了 Install vue-router? (Y/n) 是否安装 vue-router，
18、这是官方的路由，大多数情况下都使用，不过我的第一个项目中的路由是自己写的，没有使用到官方路由，因为有特殊需求，也因为比较早，官方尚未成熟， vue-router官网 。这里就输入 “ y” 后回车即可。 Use ESLint to lint your code? (Y/n) 是否使用 ESLint管理代码， ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用。 ESLint官网 接下来也是选择题 Pick an ESLint preset (Use arrow keys) 选择一个 ESLint预设，编写 vue项
19、目时的代码风格，选择使用 ESLint Standard (https:/ 标准，有些看不明白，什么标准呢，去给提示的 standardgithub地址看一下， 原来时 js的标准风格 AirBNB (https:/ JavaScript最合理的方法，这个 github地址说的是 JavaScript最合理的方法 none (configure it yourself) 这个不用说，自己定义风格 具体选择哪个因人而异吧 ，我选择标准风格 Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，选择安装 Setup e2e tests with N
20、ightwatch(Y/n)? 是否安装 e2e测试 ，选择安装 生成的项目结构 . |- build / 项目构建 (webpack)相关代码 | |- build.js / 生产环境构建代码 | |- check-version.js / 检查 node、 npm等版本 | |- dev-client.js / 热重载相关 | |- dev-server.js / 构建本地服务器 | |- utils.js / 构建工具相关 | |- webpack.base.conf.js / webpack基础配置 | |- webpack.dev.conf.js / webpack开发环境配置 |
21、|- webpack.prod.conf.js / webpack生产环境配置 |- config / 项目开发环境配置 | |- dev.env.js / 开发环境变量 | |- index.js / 项目一些配置变量 | |- prod.env.js / 生产环境变量 | |- test.env.js / 测试环境变量 |- src/ 源码目录 | |- components / vue公共组件 | |- store / vuex的状态管理 | |- App.vue / 页面入口文件 | |- main.js / 程序入口文件，加载各种公共组件 |- static / 静态文件，比如一些图
22、片， json数据等 | |- data / 群聊分析得到的数据用于数据可视化 |- .babelrc / ES6语法编译配置 |- .editorconfig / 定义代码格式 |- .gitignore / git上传需要忽略的文件格式 |- README.md / 项目说明 |- favicon.ico |- index.html / 入口页面 |- package.json / 项目基本信息 . 项目结构说明 指令 v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-pre v-cloak v-once 选项 / 生命周期钩子 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed errorCaptured 组件定义 data props propsData computed methods watch filters 生命周期钩子 模板数据绑定
