CMS 02 前端开发

1,vue.js 研究

1.1 vue.js 介绍

1. vue.js 是什么?

vue是一套用于构建用户界面的渐进式框架。vue 被设计为可以自底向上逐层应用。0

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

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

2,Vue.js 与 ECMAScript 

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

什么是ECMAScript.

CMS 02 前端开发

3. Vue.js 的使用

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

        2,使用Npm管理依赖,使用webpack 打包工具对vue.js 应用打包。大型应用推荐此方案

        3,Vue-CLl脚手架 使用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。

1,MVVM拆分解释为:

        1,Model:负责数据存储

        2,View:负责页面展示

        3,ViewModel:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示

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

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

4,Vue中的MVVM

CMS 02 前端开发

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

1.2.2 入门程序

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue 入门程序</title>
    <script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

</head>

<body>
<div id="app">
    {{name}}
</div>
</body>
<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律" //相当于MVVM中的model
        }
    });
</script>
</html>

入门程序代码编写步骤:

        1,定义html,引入vue.js

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

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

        4,定义model(数据对象)

        5,VM完成在app中的展示

1.2.3 1+1=2

        实现效果;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue 1+1=2</title>
    <script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

</head>

<body>
<div id="app">
    {{name}}
    <input type="text" v-model="num1"/>
    <input type="text" v-model="num2"/>
    <!-- 转换成int 才可以正常计算 -->
    {{Number.parseInt(num1)+Number.parseInt(num2)}}
</div>
</body>
<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1

        }
    });
</script>
</html>

1+1=2 例子中运用了v-model 

何为双向绑定:

        a,由模型数据绑定到Dom对象,模型数据的值改变,Dom对象的值自动改变。

        b,由Dom对象绑定到模型数据,Dom对象的值改变,模型数据就改变。

一,v-model

        1,在表单控件或者组件上创建双向绑定

        2,v-model 仅能在如下元素中使用:

        input

        select

        textarea

        components(vue中的组件)

二,但是如果是v-model 在网络慢时,会先展现出表达式model,然后再显示view,v-text 可以解决这个问题。

 2,解决插值表达式闪烁问题,使用v-text,将表达式放到v-text 中,注意将{{}} 去掉,它可以解决表达式闪烁的问题

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-text</title>

</head>

<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>
    <input type="text" v-model="num2"/>
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1

        }
    });
</script>
</html>

首先一个前提,如果要引用 定义的model 变量,需要在前面加上this,比如this.num

v-on 监听用户事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-on</title>

</head>

<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1,
            result:0 //定义计算结果model
        },
        methods:{
            change: function(){
                this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
            }
        }
    });
</script>
</html>

4, v-bind 

        作用:

                v-bind 可以将数据对象绑定在dom的任意属性中。(将model 绑定到view 中,但不是双向绑定,)

                v-bind 可以给dom 对象绑定一个或多个特性,例如动态绑定style和class

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-bind</title>
</head>

<body>
<div id="app">
    <!-- v-bind 可以给dom对象绑定一个或多个特性,例如动态绑定style和class -->
    <a v-bind:href="url" v-bind:style="{fontSize:size+'px'}">传智播客</a> 
    <div v-bind:style="{fontSize:size+'px'}">JAVAEE培训</div>

    
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1,
            result:0, //定义计算结果model
            url:"http://www.itcast.cn/",
            size:21
        },
        methods:{
            change: function(){
                this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
            }
        }
    });
</script>
</html>

3,缩写形式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-bind</title>
</head>

<body>
<div id="app">
    <!-- v-bind 可以给dom对象绑定一个或多个特性,例如动态绑定style和class -->
    <a v-bind:href="url" v-bind:style="{fontSize:size+'px'}">传智播客</a> 
    <div v-bind:style="{fontSize:size+'px'}">JAVAEE培训</div>

    <!-- 缩写后 -->
    <a :href="url" :style="{fontSize:size+'px'}">传智播客</a> 
    <div :style="{fontSize:size+'px'}">JAVAEE培训</div>

    
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1,
            result:0, //定义计算结果model
            url:"http://www.itcast.cn/",
            size:21
        },
        methods:{
            change: function(){
                this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
            }
        }
    });
</script>
</html>

1.2.4 v-if 和v-for

v-for

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-for v-if</title>
</head>

<body>
<div id="app">
    <ul>
        <!-- 简单数组 -->
        <li v-for="(item,index) in list" :key="index" v-if="item % 2 == 0">{{item}}--{{index}}</li>
        <!-- map对象 采用key,value-->
        <li v-for="(value,key) in user" :key="key">{{key}}--{{value}}</li>
        <!-- 数组对象-->
        <li v-for="(item,index) in userList" :key="item.user.usrename">{{index}}--{{item}}--{{item.user.usrename}}</li>
    </ul>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
           list:[1,2,3,4,5],
           user:{usrename:"张三",age:"12"},
           userList:[
            {user:{usrename:"张三",age:"12"}},
            {user:{usrename:"李四",age:"13"}},
            {user:{usrename:"王五",age:"14"}}
           ]
        },
        methods:{
            
        }
    });
</script>
</html>

 v-if v-else

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-for v-if</title>
</head>

<body>
<div id="app">
    <ul>
        <!-- 
            用法:
                1,v-for: (x,y) in list , x 指实体,y 指索引值,这个可以随便定义,
                2, :key , 是指唯一值,这个时候一般用索引值,但是在遇到复杂类型时,就不能用索引值,需要手动找到每条数据唯一值
        -->
        <!-- 简单数组 -->
        <li v-for="(item,index) in list" :key="index" v-if="item % 2 == 0">{{item}}--{{index}}</li>
        <!-- map对象 采用key,value-->
        <li v-for="(value,key) in user" :key="key">{{key}}--{{value}}</li>
        <!-- 数组对象 :key重新定义了唯一值-->
        <li v-for="(item,index) in userList" :key="item.user.usrename">
            <div v-if="item.user.usrename == '张三'" style="background-color: brown;">
                {{index}}--{{item}}--{{item.user.usrename}}
            </div>
            <div v-else="item.user.usernanme != '张三'">
                {{index}}--{{item}}--{{item.user.usrename}}
            </div>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
           list:[1,2,3,4,5],
           user:{usrename:"张三",age:"12"},
           userList:[
            {user:{usrename:"张三",age:"12"}},
            {user:{usrename:"李四",age:"13"}},
            {user:{usrename:"王五",age:"14"}}
           ]
        },
        methods:{
            
        }
    });
</script>
</html>

1.3 webpack 入门

使用vue.js开发大型应用需要使用webpack打包工具,本节研究webpack的使用方法。

1.3.1 webpack介绍

webpack 是一个前端资源的打包工具,它可以将js.image,css等资源当成一个模块进行打包。

CMS 02 前端开发

 CMS 02 前端开发

 webpack 的缺点

1,配置有些繁琐

2,文档不丰富

1.3.2 安装webpack

1.3.2.1 安装Node.js

webpack 基于node.js运行,首先需要安装node.js

CMS 02 前端开发

 1,下载对应你的系统的Node.js版本,推荐下载LTS版本。

安装好后,在cmd,直接 node -v 出现版本号即可。CMS 02 前端开发

1.3.2.2 安装NPM

1,npm 安装

      node.js安装完成后,其实npm已经安装完成了,在黑窗口打印npm-v ,即可看到版本。

 2,设置包路径

        包路径就是npm从远程下载的js包所存放的路径

使用npm config ls 查询NPM管理包路径(NPM下载的依赖包所存放的路径)

CMS 02 前端开发

NPM 默认的管理包路径 C:/用户/[用户名]/AppData/Roming/npm/node_meodules,为了方便对依赖包管理,我们可以将管理包的路径设置在单独的地方,本教程将安装目录设置在node.js的目录下,在node.js 安装路径下创建npm_modules 和 npm_cache, 执行下边的命令:

  本教程安装node.js在D:\Software\NodeJs 下所以执行命令如下:

npm config set prefix "D:\Software\NodeJs\npm_modules" 

npm config set cache "D:\Software\NodeJs\npm_cache"

此时再次使用 npm config ls 查询NPM 管理包路径发现路径已更改

CMS 02 前端开发

 3,安装cnpm

npm 默认会去国外的镜像去下载js 包,在开发中通常我们使用国内镜像,这里我们使用淘宝镜像下边我们来安装cnpm:

有时我们使用npm下载资源会很慢或者没网,所以我们可以安装一个cnmp(淘宝镜像) 来加快下载速度,

输入命令,进行全局安装淘宝镜像。

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

如果没网的话,就使用准备的教程资料,将npm_models.zip

CMS 02 前端开发

解压后,放到npm 的包下。

安装后,我们可以使用一下命令来查看cnpm的版本。

cnpm -v  查看版本

CMS 02 前端开发

此时,如果cpnm -v  不可以的话,执行下列方法

https://blog.csdn.net/weixin_41999084/article/details/98036282

用cpnm -v 可以看到

CMS 02 前端开发

执行 nrm ls  查看镜像,

CMS 02 前端开发

 此时遇到这个问题,执行nrm ls 命令 遇到问题

解决办法:https://www.cnblogs.com/Snowfun/p/14817559.html

上面的办法可能不能解决nrm ls 的问题,可以使用这个包,解压在Nodejs 下面

CMS 02 前端开发

node_modeules 包下面的文件如图,

这里怎么使用npm install -g cnpm --registry=https://registry.npm.taobao.org 这个命令都报错,无奈,只能使用老师给的资料 

链接: https://pan.baidu.com/s/1kA1doI5v8EEHvqHWxlSJvQ 提取码: vu82 复制这段内容后打开百度网盘手机App,操作更方便哦

将这个链接解压到nodeJS 的安装路径中,即可。

CMS 02 前端开发

小※代表了当前镜像,如何切换镜像。

使用 nrm use XXX切换镜像

如果nrm 没有安装则需要进行全局安装:cnpm install -g nrm

CMS 02 前端开发

1.3.2.3 安装webpack

  1,联网安装

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

本地安装:仅将webpack安装到当前项目的node_modules 目录下,仅对当前项目有效

全局安装:将webpack安装在本机,对所有项目有效,全局安装会锁定一个webpack版本,该版本可能不适用某个项目,全局安装命令需要添加 -g 参数。

不详细讲解了,解压上面的资料会自动安装完成,如果以后安装,直接搜教程。

CMS 02 前端开发

1.3.3 入门程序

通过入门程序体会webpack打包的过程及模块化开发的思想

1.3.3.1 需求分析

上面我们通过vue 实现的计算代码,可以通过webpack 进心模块化管理

CMS 02 前端开发

1.3.3.2 定义模块

在前端项目里随便创建一个文件夹webpacktest01 ,将vue.min.js 及vue_02.html 拷贝到目录下

1. 定义model01.js (里面写的js方法)

在webpacktest01 文件夹里创建model01.js,

将 加法这个程序运算的VM方法抽取到这个model01.js里面,此文件就是一个模块。

model01.js 下内容:

// 定义add函数
function add(x, y) {
    return x + y
}

// function add2(x, y) {
//     return x + y+1
// }

// 导出add方法
module.exports.add = add;
// module.exports ={add,add2};//如果有多个方法这样导出
// module.exports.add2 = add2//如果有多个方法也可以这样导出

后面的导出add方法,就是这个add方法可以进行导出了,然后启动类里有导入方法,可以将这个文件导入进去

2, 定义main.js (webpack 下该模块的js主文件)

        这个文件要做的事情,步骤

        1,在此文件中会引用model1.js 文件(被我们抽取出来的VM代码的那个文件)

        2,引用vue.min.js(它也是一个模块),vue 的官方 文件。

        3,将html页面中构建vue实例的代码放到main.js中

//1,导入js 文件
var {add} = require("./model01");

// 2,导入vue.min.js 官网文件
var Vue = require("./vue.min");

//3, 第三步
var VM = new Vue({
    el:'#app',//表示当前vue对象接管app的div区域
    data:{
        name:"郑继坤自律", //相当于MVVM中的model
        num1:1, // 定义model
        num2:1,
        result:0 //定义计算结果model
    },
    methods:{
        change: function(){
            this.result= add(Number.parseInt(this.num1),Number.parseInt(this.num2));
        }
    }
});

        1.3.3.3 打包测试

上边将mode01.js 模块及main.js主文件编写完成,下边使用webpack对这些js文件进行打包

1,进入程序目录,执行 webpack main.js build.js,这段指令表示将main.js打包输出为build.js文件

执行完成,观察程序目录是否出现build.js。

2,在html中引用build.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-on</title>

</head>

<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="./build.js" charset="UTF-8"></script>

</html>

3,测试总结

总结:webpack 可以将js分模块开发,开发完成对各个模块代码打包成一个统一的文件。

前端模块开发的思想和服务端模块开发的思想是一致的,有利于多人协作开发。

1.3.4 webpack-dev- server

webpack-dev-server 开发服务器,他的功能可以实现热加载,自动刷新浏览器。

创建一个编写webpack -dev-server 的环境:

        创建一个新的程序目录,这里我们创建webpackDevServer目录,将webpack 入门程序的代码拷贝进来(html 页面(静态页面),main.js文件(入口文件),vue.main.js(vue 官方文件), js 文件(写js 方法的),build.js(webpack 生成的)),并在目录下创建src 目录,dist目录。

将main.js 和model01.js拷贝到src目录。

CMS 02 前端开发

1.3.4.1 安装配置

1,安装webpack-dev-server

使用webpack-dev-server 需要安装webpack,webpack-dev-server 和html-webpack-plugin三个包。

在命令行输入下面命令:

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装完成,会发现程序目录下出现了一个package.json文件,此文件中记录了程序的依赖。

没有联网的话,执行上面的命令是无效的,可以使用下面的资源包,拷贝node_modules.zip到webpackDevServer 目录下,解压到node_modules目录下。

将资源解压到webpackDevServer 下,是这样的

CMS 02 前端开发

2,配置webpack-dev-server

在package.json 中配置script(将下列代码复制到package.json)

"scripts": {
    "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
},

--inline: 自动刷新

--hot: 热加载

--port:指定端口

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

--host:可以指定服务器ip,不指定则为127.0.0.1,如果对外发布则填写公网iP地址。

此时package.json的文件内容如下:

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

devDependencies: 开发任意在开发过程中所需要的依赖。

scripts:可执行的命令。

1.3.4.2 配置webpack.config.js

在webpackDevServer 文件夹下创建webpack.config.js,webpack.config.js是webpack的配置文件。在此文件中可以配置应用的入口文件,输出配置,插件等,其中要实现热加载自动刷新功能需要配置html-webpack-plugin 插件。

html-webpack-plugin 的作用是根据html 模板在内齿生成html 文件,他的工作原理是根据模板文件在内存中生成一个index.html文件。

1,配置模板文件

  将原来的vue_04.html作为模板文件,为了和内存中的index.html文件名区别,注意将vue_04.html中的script标签去掉(<script type="text/javascript" src="./build.js" charset="UTF-8"></script>),内容如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-on</title>

</head>

<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>
</body>
</html>

2,配置 html-webpack-plugin 

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

var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',//指定打包的入口文件
    output:{
            path : __dirname+'/dist',
            filename:'build.js'
        },

    plugins:[
        new htmlwp({
            title:'首页',//生成的页面标题<head><title>首页</title></head>
            filename: 'index.html',//webpack‐dev‐server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
            template: 'vue_04.html'
        })
    ]
}   

CMS 02 前端开发

现在webpackDevServer 下已经有了webpack.config.js

1.3.4.3 启动

启动文件两种办法:

1,进入webpackDevServer 目录,在命令行中执行npm run dev 

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

此时启动有个问题,在命令行中执行npm run dev,出现找不到 Error: Cannot find module 'html-webpack-plugin',这次的原因是因为我复制的命令是pdf 里直接粘贴的,所以格式可能有误,将html-webpack-plugin 用手敲出来即可改正错误。

因为 webpack-dev-server 会热加载,自动刷新浏览器,所以,修改src 中的任意文件内容,会自动加载并刷新浏览器。        

1.3.4.4 debug 调试

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

webpack将多个源文件打包成一个文件,并且文件的内容产生了很大的变化,webpack提供devtool进行调试,
devtool是基于sourcemap的方式,在调试时会生成一个map文件,其内容记录生成文件和源文件的内容映射,即
生成文件中的哪个位置对应源文件中的哪个位置,有了sourcemap就可以在调试时看到源代码。
配置如下:

1、在webpack.config.js中配置:

devtool:'eval‐source‐map',
var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',//指定打包的入口文件
    output:{
            path : __dirname+'/dist',
            filename:'build.js'
        },
    devtool:'eval‐source‐map',
    plugins:[
        new htmlwp({
            title:'首页',//生成的页面标题<head><title>首页</title></head>
            filename: 'index.html',//webpack‐dev‐server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
            template: 'vue_04.html'
        })
    ]
}   

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

一个例子:
在add方法中添加debugger

function add(x,y){
    
    return x+y;
}
function add1(x,y){
    debugger
    return x+y+1;
}
//导出add方法
//module.exports.add=add;
//多个方法可以这么写
module.exports={add,add1};

上一篇:信息收集之网站架构信息


下一篇:苹果cms设置提供采集接口让他人采集