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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
javascript 得到变量类型的函数
May 19 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
php批量修改表结构实例
2017/05/24 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python类的专用方法实例分析
2015/01/09 Python
Python素数检测的方法
2015/05/11 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
基于Python实现粒子滤波效果
2020/12/01 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
php优化查询foreach代码实例讲解
2021/03/24 PHP
房地产融资计划书
2014/01/10 职场文书
监察建议书格式
2014/05/19 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers