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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
vue实现评价星星功能
Jun 30 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Python ftp上传文件
2016/02/13 Python
python模块之re正则表达式详解
2017/02/03 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
英文版餐饮业求职信
2013/10/18 职场文书
教育孩子心得体会
2014/01/01 职场文书
音乐器材管理制度
2014/01/31 职场文书
阳光体育活动总结
2014/04/30 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
工作推荐信模板
2015/03/25 职场文书
学校标语口号大全
2015/12/26 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Python代码实现双链表
2022/05/25 Python