webpack+vue.js快速入门教程


Posted in Javascript onOctober 12, 2016

前言

vuejs——轻量、学习成本低、双向绑定、无dom的操作、组件的形式编写

vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定、指令、逻辑控制、过滤器、事件监听、函数等。框架的特点使得项目 在状态变更、分页的场景下可以拥有很大的便利——所有的操作只需要变更数组,没有任何的dom操作。

webpack——CommonJS的引用和编写方式、loader非常的丰富,包括vue-loader、css-loader、less-loader

webpack是前端组件化的解决方案,webpack提供了核心的CommonJS引用方案去引用资源,下面这篇文章就给大家介绍webpack和vue.js,一起来看看吧。

项目的创建

1.新建项目文件夹,并在其中建立package.json

$ mkdir [project name]
$ cd [project name]
$ npm init

2.在项目目录下新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue example</title>
</head>
<body>
 <div>{{message}}</div>
 <script src="dist/build.js"></script>
</body>
</html>

src文件夹,并在该文件夹下建立main.js

import Vue from 'vue'
new Vue({
 el:'body',
 data:{
 message:'test success!'
 }
});

设置webpack

1.安装webpack,webpack-dev-server以及相关的loaders

# 全局安装webpack,webpack-dev-server
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 为项目安装其他依赖
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

     webpack-merge:开发环境和生产环节的webpaak配置文件的配置合并

     css-loader:编译写入css

     style-loader:把编译后的css整合进html

     file-loader:编译写入文件,默认情况下生成文件的文件名是文件名与MD5哈希值的组合

     vue:vue主程序

     vue-loader:编译写入.vue文件

     vue-html-loader:编译vue的template部分

     vue-style-loader:编译vue的样式部分

     vue-hot-reload-api:webpack对vue实现热替换

     babel-core:ES2015编译核心

     babel-loader:编译写入ES2015文档

     babel-preset-es2015:ES2015语法

     babel-preset-stage-0:开启测试功能

     babel-runtime:babel执行环境

     url-loader

这里介绍下url-loader,这个loader实际上是对file-loader的封装

比如CSS文件中有时候会这么写:

.demo{
 background-image: url('a.png');
}

module:{
 loaders:[
 {test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}
 ]
}

经过以上配置,当a.png小于8K就会自动将图片转换成base64编码,如果不小于,则不会转换。

这里顺便提一句,在module配置的时候,loader的写法:

module:{
 loaders:[
 {test:/\.jade$/,loader:'jade'}
 //这里配置了让webpack识别jade的loader,其他类似,比如.vue
 //用于css文件的loader有两种写法
 {test:/\.css$/,loader:'style!css'}
 {test:/\.css$/,loaders:['style','css']}
 ]
}

2.配置webpack.config.js

在根目录下建立webpack.config.js,配置如下:

var path = require('path');
module.exports = {
 entry: './src/main.js',
 //定义webpack输出的文件,我们在这里设置了
 让打包后生成的文件放在dist文件夹下的build.js文件中
 output: {
 path: './dist',
 publicPath:'dist/',
 filename: 'build.js'
 },
 module: {
 loaders: [
 //转化ES6语法
 {
 test: /\.js$/,
 loader: 'babel',
 exclude: /node_modules/
 },
 //图片转化,小于8K自动转化为base64的编码
 {
 test: /\.(png|jpg|gif)$/,
 loader:'url-loader?limit=8192'
 }
 ]
 },
 //这里用于安装babel,如果在根目录下的.babelrc配置了,这里就不写了
 babel: {
 presets: ['es2015','stage-0'],
 plugins: ['transform-runtime']
 }
}

特别说明

如果要在.babelrc下配置babel,则需要在根目录下新建该文件,windows环境下,不能新建该txt文件然后改后缀,需要通过dos命令建立:

echo>.babelrc

通过该命令就可以建立babelde配置文件,用编辑器打开,修改里面的内容为:

{
 "presets": ["es2015", "stage-0"],
 "plugins": ["transform-runtime"]
}

完成该配置我们在命令中运行

$ webpack

打开index.html就可以看到浏览器中看到我们刚刚写的文字

总结

至此我们实现了最基本的利用webpack打包vue,大家最好自己实际操作下代码才能更好的理解,希望这篇文章对大家能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
js中直接声明一个对象的方法
Aug 10 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
prototype.js常用函数详解
Jun 18 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
jquery 抽奖小程序实现代码
Oct 12 #Javascript
微信js-sdk地理位置接口用法示例
Oct 12 #Javascript
vue.js表格组件开发的实例详解
Oct 12 #Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 #Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 #Javascript
Vue.js中数组变动的检测详解
Oct 12 #Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
pymysql的简单封装代码实例
2020/01/08 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
中学生个人自我评价
2014/02/06 职场文书
网络编辑求职信
2014/04/30 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
财务工作个人总结
2015/02/27 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript