webpack+vue.js入门教学
- 更新时间:2020-07-21 10:01:03
- 编辑:居晴丽
参考资料
- C#经典实例 PDF 电子书 / 7.9 MB / 杰伊·希尔亚德 推荐度:
- Qt5开发及实例(第3版) PDF 电子书 / 213.2 MB / 陆文周 推荐度:
- 《Vue.js 前端开发 快速入门与专业应用》配套彩图,源码 配套资源 / 4.2 MB / 陈陆扬 推荐度:
- 《PhoneGap实战》书内实例 配套资源 / 73.9 MB / 董霙 黄悦 李硙 祁特 黄珊 刘娅琦 推荐度:
- 《Photoshop+CorelDRAW平面设计创作实例教程》习题答案,教学大纲,教案 配套资源 / 31 MB / 周建国 推荐度:
正文内容
webpack+vue.js快速入门教程
前言
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,大家最好自己实际操作下代码才能更好的理解,希望这篇文章对大家能有所帮助,如果有疑问大家可以留言交流。
相关教程
-
webpack打包过程中因为图片的路径导致的问题
这篇文章主要介绍了webpack踩坑之路图片的路径与打包,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
发布时间:2020-03-09
-
深入理解Vue Webpack2单元测试
这篇文章主要给大家介绍了关于Vue Webpack2单元测试的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习
发布时间:2020-02-05
-
webpack多入口配置方法总结
本篇文章主要介绍了webpack 多入口配置 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-01-03
-
基于webpack4从零开始构建react开发环境方法步骤详解
这篇文章主要介绍了详解如何用webpack4从零开始构建react开发环境,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-01-16
-
分享React 项目迁移 Webpack Babel7的实现
这篇文章主要介绍了React 项目迁移 Webpack Babel7的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-02-04
-
Vue+ElementUI项目怎样使用webpack输出MPA
这篇文章主要介绍了Vue+ElementUI项目使用webpack输出MPA的方法,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
发布时间:2020-02-04
-
详解webpack4 升级迁移
这篇文章主要介绍了webpack 4 升级迁移的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-01-15
-
解析Vue2.0基于vue-cli+webpack Vuex的用法
下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-02-11
-
如何解决webpack配置打包后图片路径出错
本篇文章主要介绍了webpack配置打包后图片路径出错的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2019-12-18
-
实例讲解webpack进阶之插件篇
这篇文章主要介绍了详解webpack进阶之插件篇,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-02-05
-
Node.js实战:使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用
大小:227 MBNode.js电子书
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。
大小:26581 MB MVue.js入门
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。
大小:186.6 MBWeb前端电子书
-
Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统
本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现
大小:132979 MB 项目实战
-
水晶石技法VUE 10完全学习手册
《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见
大小:114191 MB VUE10学习手册