dotnetage / vue-in-action Goto Github PK

View Code? Open in Web Editor NEW

164.0 12.0 64.0 26 KB

《Vue 实践揭秘》

License: MIT License

vue-in-action's Introduction

梁睿坤 (著)

书　　号：978-7-121-31068-3

出版日期：2017-04-14

页　　数：304

开　　本：16(185*235)

出版状态：上市销售

本书以Vue2的实践应用为根基，从实际示例入手，详细讲解Vue2的基础理论应用及高级组件开发，通过简明易懂的实例代码，生动地让读者快速、全方位地掌握Vue2的各种入门技巧以及一些在实际项目中的宝贵经验。

本书除了全面、细致地讲述Vue2的生态结构、实际编程技巧和一些从实践中得到的经验，还重点介绍如何以组件化编程**为指导，以前端工程化方法为实现手段来实践Vue2，通过组件的单元测试和E2E测试来保证工程质量。

前言
第1章 - 例说Vue.js
- 1.1 插值
- 1.2 数据绑定
- 1.3 样式绑定
- 1.4 过滤器
第2章 - 工程化的Vue.js开发
- 2.1 - 脚手架 vue-cli
- 2.2 - 深入 vue-cli 的工程模板
- 2.3 - Vue工程的Webpack配置与基本用法
- 2.4 - 基于Karma+Phantom+Mocha+Sinon+Chai的单元测试环境
- 2.5 - 基于Nightwatch的端到端测试环境
第3章 - 路由与页面间导航
- 3.1 - vue-router
- 3.2 - 路由的模式
- 3.3 - 路由与导航
- 3.4 - 导航状态与样式
- 3.5 - URL的替换和追加
- 3.6 - 关于Fallback
- 3.7 - 小结
第4章 - 组件化的设计与实现方法
- 4.1 - 页面逻辑的实现
- 4.2 - 封装可重用组件
- 4.3 - 自定义事件
- 4.4 - 数据接口的分析与提取
- 4.5 - 从服务端获取数据
- 4.6 - 创建复合型的模板组件
- 4.7 - 数据模拟
- 4.8 - 小结
- 4.9 - 扩展阅读 - Vue组件的继承 mixin
第5章 - VUE的测试与调试技术
- 5.1 - Mocha入门
- 5.2 - 组件的单元测试方法
- 5.3 - 单元测试中的仿真技术
  - 5.3.1 - 调用侦测
  - 5.3.2 - Sinon断言扩展
  - 5.3.3 - 存根
  - 5.3.4 - 接口仿真
  - 5.3.5 - 后端服务仿真
- 5.4 - 调试
- 5.5 - Nightwatch入门
  - 5.5.1 - 编写端到端测试
  - 5.5.2 - 钩子函数与异步测试
  - 5.5.3 - 全局模块与Nightwatch调试
  - 5.5.4 - Page Objects 模式
    - 5.5.4.1 - 元素
    - 5.5.4.2 - 分段
    - 5.5.4.3 - 命令
第6章 - 视图与表单的处理
- 6.1 - 为Vue2集成uikit
- 6.2 - 表格视图的实现
  - 6.2.1 - 实时数据筛选
  - 6.2.2 - 多行数据的选择
  - 6.2.3 - 排序的实现
- 6.3 - 单一职责原则与高级组件开发方法
  - 6.3.1 - 搜索区组件
  - 6.3.2 - 母板组件
  - 6.3.3 - 重构模态对话框组件
  - 6.3.4 - 高级组件与Render方法
  - 6.3.5 - UIKit按钮组件
  - 6.3.6 - 通用表格组件
- 6.4 - 表单的设计与实现
  - 6.4.1 - 计算属性的双向绑定
  - 6.4.2 - 富文本编辑器的实现
  - 6.4.3 - 嵌套式分页容器组件
  - 6.4.4 - 表单的验证
- 6.5 - 接入服务端与CRUD的简化
- 6.6 - HTTP拦截器
- 6.7 - 开发服务器的定制
第7章 - VUEX状态管理
- 7.1 - Vuex的基本结构
- 7.2 - data的替代者-State和Getter
- 7.3 - 测试getter
- 7.4 - Action-操作的执行者
- 7.5 - 测试Action
- 7.6 - 只用Mutation修改状态
- 7.7 - 测试mutations
- 7.8 - 子状态与模块
- 7.9 - 用服务分离外部操作
附录 - Chai断言参考
附录 - Vee-Validate验证规则参考

vue-in-action's People

Contributors

Stargazers

Watchers

vue-in-action's Issues

致命的错误2 处

P192 中间 <ul class={ {'uk-nav':true } } 少一层括号。

P209中间绑定排序事件 on-click={ ( header) => this.sortBy
这个参数写的真隐蔽！

建议作者再出一个修订版吧！

关于<4.5 从服务端获取数据>一节92页第二行jQuery的this作用域描述不太恰当。

   //...
  created(){
     var self = this
    $.get('/api/home').then(res => {
          //... 对self赋值
    })
 }

这句描述的不太恰当

我们需要用一个self变量来“hold”住当前的vue对象实例,这未免显得代码很糟糕。

因为then 的参数是一个 箭头函数 所以其中的this指向的与self是完全相等的。

老师，书里有些代码没执行成功

第9页1.3样式绑定：modules里的内容webpack2.0以后的写法有变动，测试好久都报错，发现是这地方问题。
{ test: /\.(less|css)$/, use: [ "style-loader", "css-loader", "less-loader" ] },

第10页一直报错，后来添加lang="less"后终于通过了，
<style scoped lang="less">

第33页 $ npm karma i -g 应该为$ npm i karma -g
老师，这本书暂时看到2.3.3了，感觉写的非常不错，我会继续努力的。

你想在第六章的6.3想说啥，可否直接跳过垃圾的6.3这一节

   第一，你的第六章写的很不好，我硬着头皮看6.3的，看不懂越看越恼火，很多文字和配图代码感觉没有关系，我努力地找关系，但是还是不懂。P182的那个文字说的和代码显示的都是两码事。我是没有信心看了，
   第二，我刚要看6.4的时候P211,"首先，设计这个表单组建的用法接口"这句话说完，下面配的是你提到很多次的测试的格式。请问这是接口还是测试？
   第三，为啥介绍到后面JSX都出来了，那不是React的吗？又详细的说React常用的render,我觉得介绍vue的template还是多些好，这样很容易混淆?

新老版本导致许多问题

但是你书中的代码很多是老版本的,对于新版本 vue-router 等一系列的插件编译器是会报错的，不过这本书的编程**还是棒棒哒。谢谢。技术更新迭代快，还得靠自己去填坑。

你为何不把代码都放在 vue-in-action repo内

这个每一章的源码都要到处找，实在是吃力不讨好。而且名字还不一样。

P251,代码错误

P251，上面一段代码中<script>中的window.$data = {current_user :
后面就什么都没有了。

第1章全局安装vue-cli的版本是？

$ npm i vue-cli -g；没说明具体版本，我现在安装的话，是默认最新的2.9.6，但再后面导入less后有错误，我想是vue-cli版本的关系

大哥你确定书中的代码都有运行过的？

其他就不说了。P123页中。创建一个简单的spy辅助函数处。
const spy = () => { //... } 这里不可以使用箭头函数吧。不然argumrnet衡指向外部的arguments。也就是sum函数……
唉~

路由配置无法指到图书详情页

梁老师辛苦了，我参照书中的内容实现了一下图书详情，但在（Page67页）路由配置中，无法跳转到'localhost:8080/books/:id'。为什么呢
https://github.com/yangdonglei/vue2---router-

老师您好，关于多入口的问题，想请教！

老师所推荐的多入口的方式是其他vue实例中没有提及的，看后感觉与我当前项目非常吻合，但是关于多入口有点疑惑，多入口后的管理端的 router、store 和APP端的 router、store 是采用公用模式，还是后台管理用后台管理的router 和 store ，app前台用前台的 router 和 store呢，望老师给予解惑

老师，按照你的步骤，配置以后如下代码
'phantom': { 'desiredCapabilities': { 'browserName': 'phantomjs', 'javascriptEnabled': true, 'acceptSslCerts': true, 'phantomjs.page.settings.userAgent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36', 'phantomjs.binary.path': phantomjs.path }
并在runner.js中完成设置启动浏览器的设置，但是运行后显示
`Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?
{ value:
{ stacktrace: 'org.openqa.selenium.WebDriverException: Timed out waiting for driver server to start.\nBuild info: version: '3.6.0', revision: '6fbf3ec767', time: '2017-09-27T16:15:40.131Z'\nSystem i
nfo: host: 'DESKTOP-M137S47', ip: '192.168.159.1', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_111'\nDriver info: driver.version: unknown\r\n\tat org.openqa.
selenium.remote.service.DriverService.waitUntilAvailable(DriverService.java:192)\r\n\tat org.openqa.selenium.remote.service.DriverService.start(DriverService.java:178)\r\n\tat org.openqa.selenium.remote.serv
er.ServicedSession$Factory.apply(ServicedSes`

P89 接收自定义事件指令应为v-on

...也是使用v-bind指令标记接收onBookSelect事件

此处应该为v-on接收自定义事件，v-bind应该是用于属性绑定。

另外，文中

...每个采用v-bind(此处也该为v-on)指令接受的事件都会自动产生$event对象，如果事件本身没有传出的参数，那么这个$event就是一个DOM事件对象实例

感觉这里不是太准确，这里的@onBookSelect并未产生实际的DOM事件（click选中事件发生在子组件中）。如果此处输出$event的值，我得到的结果为undefined

P251,第一个代码块中

window.$data = { current_user :
这里少写代码了吗？

书中例子与github上的源码为什么从建构上就不一样

您好，首先很荣幸能拜读这本书。其次，能否冒昧请您按照书中章节实例提供源码参考，光一概而论的第三章到第五章源码实在有着很多疑惑的地方。然后，书中第三章67页给出的代码，按照“现在重点是怎么样重构routes.js中的路由配置”这句话来理解应该是指对应到routes.js中的代码，但在69页3.4节中导航状态样式功能处，却又明确的写着“在main.js文件内的VueRouter配置中加入以下的语句”，这是否前后矛盾？