Vue.js和Webpack

时间 2019-11-12

标签 vue.js vue webpack 栏目 JavaScript 繁體版

原文原文链接

Vue.js

Vue简单介绍

是一个轻量级的渐进式框架，一个前端项目可使用使用Vue.js的一两个特性也能够整个项目都用Vue.js，很方便实现项目的增量开发css

Vue.js的使用：()html

在html页面使用<script>引入Vue.js的库便可使用前端

使用Npm(cnpm)管理依赖，使用Webpack打包工具对Vue.js应用打包vue

可使用Vue_Cli脚手架快速构建Vue.js工程基础模版node

了解MVVM概念

了解了这个概念，有利于咱们学习Vue.js这个框架jquery

MVVM：拆分理解webpack

M：Model，负责数据的储存ios

V：View，负责页面的展现程序员

VM：View Model，负责业务逻辑的处理，好比Ajax请求等，对数据进行加工后交给视图展现，就是Vue.js的功能区web

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

也就是将View和Model模型进行解耦合，中间的渲染和逻辑的判断就交给Vue.js来完成

Vue入门认识：插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的简单入门程序</title> //导入Vue.js的库 <script src="./vue/vue.min.js"></script>
</head>
<body>
    <div id="test1"> {{name}} //插值表达式获取数据 </div>
</body>
<script>
    //实例化Vue对象
    var VM = new Vue({ //经过id标识，接管这个id所在的区域
 el:"#test1", //至关于MVVM中的model数据对象
 data:{ name:"挽起袖子的年轻人" } }); </script>
</html>

代码编写步骤：

定义html文件，引入Vue.js的库

定义一个div, 给定一个标识id

建立vue实列，过el:"#标识id"，绑定这个div区域

定义model 数据对象

VM完成在绑定的这个div中的数据渲染

Vue.js几大经常使用指令

在Vue对象中，如今有如下属性：

el：经过标识id绑定<div>
data：Vue的数据对象，存放要渲染的数据
methods：方法集合，函数通常放在这里面，勾子函数除外

下面的演示代码中，我就贴出关键的部分代码做为演示

v-on：监听dom事件，触发相应js

v-on：click （点击事件）

当咱们点击button按钮的时候，就会触发fun1函数，fun1函数会将message从新赋值，结果表现为页面中经过插值表达式获取数据的内容发生改变，改变为："挽起袖子的年轻人"

v-on：keydown (键盘按下)

v-on：mouseover(鼠标移入事件)

有一个大的div,

注释：<textarea> 是一个html的文本区域，该区域可容纳多行乃至无限的文本，咱们为其添加鼠标移入事件

防止冒泡：连个区域，小的区域寄存在一个大的区域上，若是两个区域都绑定到有相同的事件，咱们触发小区域的事件时，大区域也会被触发，由于小区域在大区域之上，为了效果叫作冒泡

v-text与v-html

能够发现，v-html会解析内容，若是内容里有标签，会以html的格式去解析，而v-text不会，原封不动的将数据渲染

v-text：能够将一个变量的值渲染到指定的元素中，他能够解决查询表达式闪烁的问题

v-bind

插值表达式不能做用在Html的特性上，遇到这种状况应该使用 v-bind指令
能够将数据对象绑定在DOM的任意属性中
能够实现动态的更新Html的多个属性，好比动态绑定style和class

v-bind 简写为不写以下

<a v-bind:href="url">...</a>
<a :href="url">...</a>

　　

这里报红不用管它，缘由不明，但不影响功能，应该是idea检测的语法的锅

v-model （双向绑定）

建立双向绑定，只能在如下元素中使用： input、select、testarea、components(Vue的组件)

v-if和v-for

结果界面

v-if和v-show

v-if在上面的列子中已经使用到了，我相信你们应该也知道了他的大概意思，就是根据表达式的值来决定是否渲染元素

v-show的话，就是根据表达式的值来切换元素的display css样式（是否显示）

在这个Demo中，v-if为true，就会显示元素我要去跑步了，下面的v-show也是true,就会显示 “我必须的记着带上个人运动手表”

咱们的点击事件的目标就是使得flag的布尔值发生转变，这样上面两个都为false的话一个不会渲染，一个不会显示（即隐藏）

Vue的生命周期

理解

每个Vue，在被建立实列的时候，都会通过一系列的初始化过程，就是SpringMVC中各类配置的加载同样，咱们能够控制这些配置的是否加载，或者加载自定义配置等，思想都是同样的，下面咱们就着手来了解一下！

初始化过程当中的会调用的勾子方法

Vue在被建立实列的时候，会调用这些勾子方法，咱们咱们自定义勾子方法会在建立Vue实列的过程当中被加载
勾子方法依次加载的顺序以下所示：

beforeCreate ：数据尚未监听，没有绑定到vue对象实例，同时也没有挂载对象

created ：数据已经绑定到了对象实例，可是尚未挂载对象

beforeMount ：模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例经过原生的createElement等方法来创建这个html片断，准备注入到咱们vue实例指明的el属性所对应的挂载点

mounted ：将el的内容挂载到了el，至关于咱们在jquery执行了(el).html(el),生成页面上真正的dom，上面咱们就会发现dom的元素和咱们el的元素是一致的。在此以后，咱们可以用方法来获取到el元素下的dom对象，并进行各类操做

beforeUpdate ：当咱们的data发生改变时，会调用beforeUpdate，数据更新到dom以前，咱们能够看到$el对象已经修改，可是咱们页面上dom的数据还没有发生改变

updated ：当咱们的data发生改变时，会调用updated ，dom结构会经过虚拟dom的原则，找到须要更新页面dom结构的最小路径，将改变动新到dom上面，完成更新

beforeDestroy ：实例的销毁，vue实例仍是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

destroyed ：实例的销毁，vue实例仍是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

下面咱们以一个列子来串一下上面说罗列的全部勾子方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的简单入门程序</title>
    <!--导入Vue.js的库-->
    <script src="../vue.min.js"></script>
</head>
<body>
    <div id="app"> {{message}} </div>
    <script>
        var vm = new Vue({ el: "#app", data: { message: '所有的勾子方法测试' }, beforeCreate: function() { console.log(this); showData('建立vue实例前', this); }, created: function() { showData('建立vue实例后', this); }, beforeMount: function() { showData('挂载到dom前', this); }, mounted: function() { showData('挂载到dom后', this); }, beforeUpdate: function() { showData('数据变化更新前', this); }, updated: function() { showData('数据变化更新后', this); }, beforeDestroy: function() { vm.test = "3333"; showData('vue实例销毁前', this); }, destroyed: function() { showData('vue实例销毁后', this); } }); function realDom() { console.log('真实dom结构：' + document.getElementById('app').innerHTML); } function showData(process, obj) { console.log(process); console.log('data 数据：' + obj.message) console.log('挂载的对象：') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } vm.message="good..."; vm.$destroy(); </script>
</body>
</html>

而后咱们可使用浏览器进行查看相应的数据 F12

我这里就举两三个列子出来说解一下，详细的须要下去仔细学习

...详细信息观察本地的浏览器的调试窗口

VueJs发起请求之Ajax

在Vue2.0以前，都是使用原始Ajax发起请求，也就是XMLHttpRequest或者JSONP发起web请求和处理响应的结果，但在Vue2.0版本后便推出了axios最为一个发起请求的工具，代替了以前的vue-resource

axios介绍

Axios是一个HTTP库，可用于在浏览器node.js中

想要使用axios有两种方法，一种是安装axios模块，一种是直接引入相关的js便可

固然咱们推荐使用第二种，简单方便

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

RestFul请求之Get请求

RestFul请求之Post请求

更多的就不演示了，好比put请求呀，delete请求呀都是支持的

webpack入门到入坟

入门的简单介绍

当咱们开发大型应用须要使用webpack打包工具，他能够将js，image，css等静态资源当成一个模块进行打包

优点：

模块化开发

前端程序员们在开发师能够分模块建立不一样的js,css等小文件，最后使用webpark将这些小文件爱你打包成一个文件，减小http的请求次数

webpark能够实现按需打包，为了不单个打包文件过大的问题，咱们能够打成多个文件

编译typescript、ES6等高级js语法

在开发中可能会遇到不少的js的高级语法，为了兼容，webpark能够将打包文件转换成浏览器可识别的js语法

CSS预编译

webpark容许在开发中使用Ssaa(不了解)，Less(不明白)的扩展技术，经过wepark能够预编译成浏览器可识别的css语法

劣势

配置较为繁琐

文档不够丰富

webpack的安装

安装Node.js

Node.js不属于前端，在前端看来这应该是属于后端的东西，他是一个js的运行环境，是一个运行在服务端的框架，由于他可使用js去编写一些服务的程序，能够用来开发服务端服务，这样先后端就都是JavaScript了，至于为何没有推广开来，多是Java太庞大，太完善了吧，毕竟是世界上最好的语言，你说是否是？

Node.js移步百度，这里不作说明

安装NPM /CNPM

NPM：它是node包管理和分发工具，使用NPM能够对对应的依赖进行管理，你能够把它当作项目构建工具Maven差很少，咱们经过NPM能够很方便的下载js库、打包js文件（这他妈不就是maven吗？）

node.js已经集成了NPM工具，咱们能够经过命令查看版本：

设置包路径

包路径就是NPM从远端下载的js包的存放路径，这里有两个概念须要说明

NPM默认的包路径是在：C:\用户\用户名\AppData\Roaming\npm\node_modules

为了便于管理，咱们从新设置到单独的地方，咱们就设置在node.js的目录下吧，

咱们在node.js的安装目录，建立两个空文件夹：npm_modules、npm_cache顺便敲开cmd黑窗口

键入指令，指定目录便可：

npm config set prefix "C:\MyFrame\node\npm_modules"
npm config set cache "C:\MyFrame\node\npm_cache"

安装CNPM

由于NPM的下载源是在国外，下载支持会很操蛋，因此通常咱们都是使用的国内的镜像，咱们使用淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装nrm

cnpm install -g nrm

查看说指定的镜像： nrm ls

能够看到，那个雪花指向的是淘宝（好像不用指，安装了以后自动指向？这个环境我安装好久了）

若是没有指向的话使用： nrm use XXX切换镜像

安装webpack

webpack的安装分为本地安装和全局安装

本地安装：将webpack安装在当前项目的node_modules目录便可，对当前项目有效
全局安装：安装到本机，对全部机器有效

本地安装（未测试）

在项目下建立一个目录，并进入到该目录，敲开cmd黑窗口

npm install --save-dev webpack 或 cnpm install --save-dev webpack

npm install --save-dev webpack-cli (4.0之后的版本须要安装webpack-cli)

全局安装（未成功，查询不到版本信息，我认为没装成功）

cnpm install webpack -g

或者指定版本：cnpm install webpack@3.6.0 -g

最快的方式：

连接：https://pan.baidu.com/s/1lSUYJQM8t-Z07sNsUiJxeg 提取码：94w2

把它下载下来拖到node.js安装目录下：就是咱们建立npm_modules的路径将其解压，他会覆盖咱们建立的文件夹

而后配置环境变量，指向webpack 终结

第一个webpack小程序

首先咱们建立一个webpackTest目录，咱们将Vue.js的库和一个咱们上面写的vue_test2.html拷入其中

定义model1.js

在webpackTest目录下建立model1.js文件

这个文件用于储存本程序须要使用的函数方法，单独抽取出来，此文件就是一个模块
function add(x,y) { return x + y; }  /*导出add函数*/ module.exports.add = add;  //当有多个方法须要导出时这样导出 //modele.exports = {add,add2};

定义main.js [ 固定文件名，打包须要使用 ]

在main.js文件中引入储存函数的modul1.js
引入Vue.js的库：vue.min.js
将html页面中构建的Vue实列的代码存放到main.js中

var {add} = require('./model01'); var Vue = require('./vue/vue.min'); var Vm = new Vue({ el:"#test2", data:{ name:"挽起袖子的年轻人:", url:"https://www.cnblogs.com/msi-chen/", value1:"0", value2:"0", result:"0" }, methods: { change: function () { //调用model1.js的add函数，完成运算
             this.result = add(Number.parseInt(this.value1) + Number.parseInt(this.value2)); alert(this.result) } } } )

打包测试：

使用webpack打包工具，对这些js文件进行打包

进入到webpackTest目录，cmd敲开黑窗口执行：webpack main.js build.js

这个指令的意思就是将main.js打包成build.js

执行以后，咱们的目录中会出现一个build,js文件

在html页面中引用build.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的简单入门程序</title>
    <!--导入Vue.js的库-->
    <script src="./vue/vue.min.js"></script>
</head>
<body>
    <div id="test2">
        <!--{{name}}<br/> : 解决闪烁问题使用 v-test 标签-->
        <!--v-bind:能够将数据对象绑定到DOM的任意属性之中-->
        <!--v-bind: 能够给DOM对象绑定多个数值，支持动态绑定style和class-->
        <a v-bind:href="url"><span v-text="name"></span></a>
        <!--v-model 双向绑定 DOM和model互相影响-->
        <input type="test" v-model="value1"> + <input type="test" v-model="value2"> = <input type="test" v-model="result">

        <!--v-on:clock 绑定单机事件 click可换其余的事件-->
        <button v-on:click="change">点击计算</button>
    </div>
</body>
<script src="./build.js"></script>
</html>

测试：自行测试，是能够完整调用函数的

webpack-dev-server

目录准备：

webpack-dev-server开发服务器，他的功能就是但是显示热加载，并且自动刷新浏览器
建立一个新的目录：复制上面的webpackTest目录，所有数据拷贝过来
在webpackTest2目录下建立 src、dist目录，将main.js和model1.js拷进src目录

安装webpack-dev-server

进入打webpackTest2目录，cmd敲开黑窗口，键入命令：安装三个包
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
安装完成后，会发现目录下多出了一个package.json文件

在package.json文件中配置srcipt

{ "devDependencies": { "html-webpack-plugin": "^2.30.1", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" }, "scripts":{ "dev":"webpack-dev-server --inline --hot --open --port 5008" } }
devDependencies：暂时不用理会，开发人员在开发中的所须要的依赖

scripts：可执行的命令，就是咱们的配置的数据

--inline：自动刷新

--hot：热加载

--open：自动在默认浏览器打开

--port：指定端口

--host：能够指定服务的ip,不指定默认本地，若是对外发布填写公网ip

配置webpack.config.js

在webpackTest2目录下建立webpack.config.js文件，这个文件时webpack的配置文件，在此文件中能够配置应用的入口文件，插件等，其中要实现热加载自动刷新功能须要配置html-webpack-plugin插件

html-webpack-plugin插件的做用就是根据html模版在内存生成html,他的工做原理是根据模板文件爱呢在内存中生成一个index.html

配置模版文件：

将vue_test2.html做为模版文件，为了和和内存中index.html文件相区分，咱们将<script>标签去掉，如：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>webpack_dev-server</title>
</head>
<body>
   <div id="test2">
       
       
       
       <a v-bind:href="url"><span v-text="name"></span></a>
       
       <input type="test" v-model="value1"> + <input type="test" v-model="value2"> = <input type="test" v-model="result">  
       <button v-on:click="change">点击计算</button>
   </div>
</body>
</html>

在webpack.config.js中配置html-webpack-plugin插件

var htmlwp = require('html-webpack-plugin'); module.exports={ entry:'./src/main.js',                //指定打包的入口文件
 output:{ path:__dirname+'/dist',            //__dirname表示当前项目绝对路径，输出到dist目录中
     filename:'build.js'                //输出文件
 }, plugins:[ //插件集
     new htmlwp({                    //建立上面的插件对象实列
         title:'首页',                //生成的index.html头信息
         filename:'index.html',      //在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
         template:'vue_test2.html'   //根据index1.html这个模板来生成(前端工程师自定义模版)
 }) ] }

而后咱们右键package.json：show npm Scripts

运行完毕后后自动打开咱们默认的浏览器，咱们就能够进行运算了

可是这里好像除了一点小问题，不打紧，咱们看看函数怎么回事？

好像没看出什么问题，也没有报错啥的，不清楚，不明白，咱也不敢问？

不出点错，怎么引入下面的dubug调试环节呢，你说是否是？

dubug调试

使用了webpack以后就不能在用传统的js的在chrome中打断点的方式进行调试了
webpack将多个源文件打成一个文件，文件内容发生了很大的变化。webpack提供devTool进行调试

配置以下：

1.在webpack.config.js中配置

var htmlwp = require('html-webpack-plugin'); module.exports={ entry:'./src/main.js', output:{ path:__dirname+'/dist', filename:'build.js' }, devtool:'eval-source-map',　　//dubug调试配置 plugins:[ new htmlwp({ title:'首页', filename:'index.html', template:'vue_test2.html' }) ] }

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

function add(x,y) { debugger
    return x + y } /*导出add函数*/ module.exports.add = add; //当有多个方法须要导出时这样导出 //modele.exports = {add,add2};
再次点击触发函数：

发现bug后修正

复制有风险啊，我只入参一个，用了+链接，参数输入有问题，修正后再次测试步入正轨