02_01 Vue.js与Webpack研究

1 Vue.js与Webpack研究

链接：https://pan.baidu.com/s/1_cxMH4M44kFknkXTet1u6Q

提取码：xook

1 vue.js研究

1.1 vue.js介绍

1、vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计

为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一

方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用

vue.js。

自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发。

参考：https://cn.vuejs.org/v2/guide/

2、Vue.js与ECMAScript

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。

什么是ECMAScript?

ES6：http://www.ecma-international.org/ecma-262/6.0/

ES7：http://www.ecma-international.org/ecma-262/7.0/

3、Vue.js的使用

1）在html页面使用script引入vue.js的库即可使用。

2）使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。

大型应用推荐此方案。

使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。

4、vue.js有哪些功能？

1）声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

比如：使用vue.js的插值表达式放在Dom的任意地方， 差值表达式的值将被渲染在Dom中。

2）条件与循环

dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。

3）双向数据绑定

Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑

定的数据对象，修改数据对象的值自动修改Dom元素中的值。

4）处理用户输入

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的

方法

5）组件化应用构建

vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。

 1.2 vue.js基础

1.2.1 MVVM模式

vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。

MVVM拆分解释为：

Model:负责数据存储

View:负责页面展示

View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更

加简单

用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点，以及使用MVVM模式是如何

来解决这个缺点的

Vue中的 MVVM

从上图看出，VM(ViewModel)可以把view视图和Model模型解耦合，VM的要做的工作就是vue.js所承担的。

1.2.2 入门程序

打开 webstrom

本次测试我们在门户目录中创建一个html页面进行测试，正式的页面管理前端程序会单独创建工程。

在门户目录中创建vuetest目录，并且在目录下创建vue_01.html文件

=========================

{{name}}

这些指令就相当于是MVVM中的View这个角色 ‐‐>

==========================

启动 nginx  浏览器输入:http://www.xuecheng.com/vuetest/vue_01.html

代码编写步骤：

1、定义html，引入vue.js

2、定义app div，此区域作为vue的接管区域

3、定义vue实例，接管app区域。

4、定义model（数据对象）

5、VM完成在app中展示数据

1.2.3    1+1=2

=========================

   

   

filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这

个页面底部，才能实现自动刷新功能

template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)

})

]

}

==========================

1.3.4.3 启动

启动文件：

1、进入 webpacktest02目录，执行npm run dev

2、使用webstorm，右键package.json文件，选择“Show npm Scripts”

打开窗口：

双击 dev。

注意：dev就是在package.json中配置的webpack dev server命令。

发现启动成功自动打开浏览器。

修改src中的任意文件内容，自动加载并刷新浏览器。

1.3.4.4 debug调试

使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。

webpack将多个源文件打包成一个文件，并且文件的内容产生了很大的变化，webpack提供devtool进行调试，

devtool是基于sourcemap的方式，在调试时会生成一个map文件，其内容记录生成文件和源文件的内容映射，即

生成文件中的哪个位置对应源文件中的哪个位置，有了sourcemap就可以在调试时看到源代码。

配置如下：

1、在webpack.confifig.js中配置：

devtool: 'eval‐source‐map',

webpack.confifig.js部分内容如下：

=============================

var htmlwp = require('html‐webpack‐plugin');

module.exports={

entry:'./src/main.js', //指定打包的入口文件

output:{

path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径

filename:'build.js' //输出文件

},

devtool: 'eval‐source‐map',

......

==============================

2、在js中跟踪代码的位置上添加debugger

一个例子：

在add方法中添加debugger

====================

// 定义add函数

function add(x, y) {

debugger

return x + y

}

=====================

启动应用，刷新页面跟踪代码：

点击“计算” 即进入debugger代码位置，此时可以使用chrome进行调试了。