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 相关文章推荐
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
JavaScript错误处理
2015/02/03 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
Python Tkinter基础控件用法
2014/09/03 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python全排列操作实例分析
2018/07/24 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python+OpenCV实现图像拼接
2020/03/05 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
劲霸男装广告词
2014/03/21 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
教师先进事迹材料
2014/12/16 职场文书
教师学习心得体会范文
2016/01/21 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
聊一聊python常用的编程模块
2021/05/14 Python