• 等级
  • 739248 访问
  • 260 原创
  • 15 转发
  • 5655 排名
  • 88 评论
  • 69 获赞

webpack打包vue-router

文章目录webpack打包vue-router示例源码运行结果 webpack打包vue-router   在项目中加载vue-router依赖指令如下: cnpm i vue-router --save   这篇文章是在之前的一篇文章的源码基础上拆分而来的,所以说我们可以通过这篇文章和之前的文章做一下相应的对比,这样可以加深我们对其的了解。   之前的那篇文章如下: Vue中路由的传参 ...

2018-11-11 00:26:40

webpack解析和打包.vue组件页面

文章目录解析和打包.vue组件页面示例源码运行结果分析 解析和打包.vue组件页面   Vue中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,其必须借助于webpack的vue-loader才能使用。   所需依赖 vue: vue js核心包 vue-loader: .vue文件编译loader vue-template-compiler:.vue模版编译,被vue-l...

2018-11-10 23:06:39

将ECMAScript6语法转换成ECMAScript5语法

文章目录将ECMAScript6语法转换成ECMAScript5语法转换原因所需依赖修改源码运行结果 将ECMAScript6语法转换成ECMAScript5语法 转换原因   由于并不是所有的浏览器都支持es6语法,但是基本上都支持es5语法,因而我们的项目在上线时有时需要将开发过程中的es6语法转换成es5语法发布,而这就是我写这篇文章的目的。   这篇文章是在上一篇文章的源码基础上进行修改的...

2018-11-10 18:11:10

webpack-dev-server实现项目热部署

文章目录webpack-dev-server作用修改源码 webpack-dev-server作用   我们在修改了项目代码以后需要不断的重新执行webpack命令,重新打包然后回到浏览器去刷新页面,这种开发效率很低下,所以说为了省去这部分没必要的操作,因而我们在这里要使用webpack-dev-server来实现当代码更新时项目的自动打包发布,刷新浏览器页面的操作。   这一篇文章是在上一篇文章...

2018-11-10 17:09:10

利用webpack打包其它资源文件

文章目录打包sass文件项目结构修改源码运行结果打包less文件修改源码运行结果   webpack除了能够打包css资源文件外,其还可以打包众多的其它类型的文件。   这里为了减少重复代码的编写,所以说此处是在上一篇文章中代码的基础上所做的修改,上一篇文章的地址如下: 利用webpack中的loader来打包css文件 打包sass文件   webpack中使用sass-loader,css...

2018-11-09 22:01:38

利用webpack中的loader来打包css文件

loader介绍   webpack本身不支持css,less,sass,js,image等相关资源的打包工作,它仅仅提供了一个基础的框架,在这个框架上借助于相关的loader才可以实现css,less,sass,js,image等相关资源的打包工作。 package.json package.json特点   package.json是Node.js的包管理文件,其在其中起到的作用类似于pom....

2018-11-09 16:03:26

webpack中webpack.config.js的使用

文章目录webpack.config.js的作用:示例源码运行结果分析 webpack.config.js的作用:   webpack.config.js是webpack打包的默认配置文件,其默认位于项目的根目录中。   比如说如果我们在控制台中输入webpack指令,后面不跟任何参数的话,则webpack默认查找位于根目录中的webpack.config.js文件,并根据该文件加载与执行相应的依...

2018-11-09 11:21:28

webpack的HelloWorld

文章目录webpack的语法示例源码运行结果分析 webpack的语法   webpack的基本用法: webpack + 所需打包的文件名 + 打包后的文件名   比如说我们所打包的源文件名为main.js而其打包后的名为build.js,所以说其打包指令为: webpack main.js build.js 示例   这里以简单的实现一个计算器为例来进行说明。   在项目根目录中,拷贝下面...

2018-11-09 10:23:00

webpack

文章目录webpack介绍webpack官网webpack资源链接webpack官网示例安装webpack当前使用的版本安装环境搭建安装Node.js安装nrm——国内淘宝镜像源安装webpack webpack介绍   webpack是一个资源的打包工具,可以将.js,.css,.image等静态资源当做一个模块来进行打包,那么每一种模块都有一个对应的loader来实现。 webpack官网 ...

2018-11-09 09:15:33

将VMware Workstation中的虚拟机迁移到VirtualBox

文章目录软件版本迁移的原因迁移虚拟机迁移思路迁移安装VBoxSolarisAdditions在VirtualBox中虚拟机与物理机互传文件 软件版本   VMware Workstation 产品:VMware® Workstation 14 Pro 版本:14.0.0 build-6661328   VirtualBox 产品:VirtualBox 图形用户界面 版本:5.2.20 r12...

2018-11-08 20:19:13

Vue中的computed计算属性

文章目录computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同 不同点 触发条件不同   computed计算属性会依赖于使用它的data属性,只要是依赖的data属性值有变动,则自定义重新调用计算属性执行一次。   watch则是在监控的data属性值发生变动时,其会自动调用watch回调函数。 执行速度不同   computed计算属性的值是...

2018-11-08 11:09:19

Vue的watch属性监控

文章目录示例监听data中属性的变化源码结果分析监听路由中的属性变化源码结果分析   watch可以用来监控程序员想要监控的对象,当这些对象发生改变以后,可以触发回调函数做一些逻辑处理。 示例 监听data中属性的变化 源码 <!DOCTYPE html> <html lang="en"> <head> &am

2018-11-08 10:03:48

Vue中路由的传参

文章目录示例源码结果分析   在项目开发中,需要用到路由传参的地方往往很多,比如说根据新闻列表页面查询新闻详情,此时我们就需要将该条新闻的id信息传递给新闻详情页面。   而在vue-router中,传参所用的关键字为query,其后跟参数map对象。 示例 源码 <!DOCTYPE html> <html lang="en"> <head&

2018-11-07 17:26:41

Vue中路由的嵌套与重定向

文章目录路由的嵌套与重定向为什么要使用路由的嵌套为什么要使用路由的重定向用法示例源码结果分析 路由的嵌套与重定向 为什么要使用路由的嵌套   随着路由页面的增多,我们经常会用到页面嵌套的情况。比如说新闻模块路径为/news,新闻列表为/news/newslist,新闻详情为/news/newslist/newsinfo,新闻详情的评论为/news/newslist/newsinfo/newscom...

2018-11-07 16:52:53

Vue2.0的使用

文章目录为什么抛弃1.0版本软件版本更新前更新后示例源码运行结果分析 为什么抛弃1.0版本   之前使用的Vue版本为v1.0.20而对其支持的比较好的Vue Devtools版本也往往不是最新版,比如说之前我在调试Vue的1.0版本时使用的Vue Devtools版本号为3.1.6,但是在GitHub上我们下载并安装的Vue Devtools其实已经摒弃了1.0版本,因而我们在使用新版本的Vue...

2018-11-06 14:21:09

Vue Devtools的安装与使用

文章目录   Vue Devtools是Vue代码的浏览器调试插件。

2018-11-06 13:04:09

Vue中的vue-router

文章目录官网vue-router的使用源码结果分析 作用:   在一个系统中往往会有很多的页面组成,在Vue开发中,这些页面通常使用的是Vue中的组件来实现的。   当一个页面跳转到另一个页面时,其是通过改变url路径来实现的,那么这个时候Vue就需要知道当前url对应的是哪个组件页面,而控制这个的就是vue-router控件。 官网   vue-router的官网GitHub地址为: vu...

2018-11-04 17:31:25

Vue中的v-el与v-ref

v-el 作用:   通过v-el我们可以获取到DOM对象。 v-ref 作用:   通过v-ref获取到整个组件(component)的对象。 示例 源码 <!DOCTYPE html> <html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml"> <head> <meta char...

2018-11-04 16:20:01

Vue中组件的切换

文章目录示例源码结果分析   此处的组件切换使用的是Vue中的component组件中的is属性来实现的。该is属性实现的功能是根据组件名称的不同来切换显示不同的组件控件。 示例 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&am

2018-11-04 15:36:54

Vue中在父组件中定义子组件与父子组件间传值

文章目录在父组件中定义子组件示例源码结果分析父组件向子组件传值示例源码结果分析子组件向父组件传值示例源码:结果分析 在父组件中定义子组件   我们除了定义独立的组件之外,Vue还支持在父组件中定义子组件。 示例 源码 <!DOCTYPE html> <html lang="en"> <head> &lt

2018-11-03 17:24:11

张侦毅

The Minute You Think Of G iving Up, Think Of The Reason Why You Held On So Long. ...展开 收起
关注
  • 互联网·电子商务/Java软件工程师
  • 中国 河北省 石家庄市
奖章
  • 专栏达人
  • 持之以恒