未加星标

小白上学のwebpack+vue初级使用指南

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

写这篇文章的时候先说一下原因:

webpack:现在很流行的打包工具;推荐原因:学习成本比gulp,fis3等简单,就是这么直接!

vue:国人开发的MVVM框架,一点都不逊于recat,vue2.0的执行速度比recat都快!推荐原因: http://www.cnblogs.com/terry0… 这里很权威。但我们今天学的是vue1.0,原因:vue2.0我还不会(^_^)!而且新手还是vue1.0学习为主吧。原因:中文文档全,学习曲线简单,很容易上手。

课程开始:

需要技能:

1>.node.js环境

2>.npm 会使用 (我的笔记中有smart-npm可以解决npm慢的问题)

3>.vue 最基本的{{}}符号会用(不会的去vue官网看5分钟教程就会)

4>.ES6 基本知道import是什么东西就行

适用学习人群:用过vue,但不知道如何和webpack一起结合使用的迷茫者;

项目创建

这里已经安装过nodejs,npm,webpack

1.用命令行工具进入你需要创建模板文件夹输入:

$ mkdir myvuetest $ cd myvuetest $ npm init

你会发现文件中出现了package.json暂时不用管;

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>

3.在根目录创建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 # 为项目安装其他依赖 下面i是install的简写,注意vue@1.0是安装vue1.0版本的不然会出错;-D是--save-dev的简写,用于生成package.json中对应的包名称,便于日后管理 $ 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 [email protected] vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

这里解释一部分包的作用:

webpack-dev-server: 用户建立node的服务器环境,就是可以用lacalhost:8080等端口方式浏览文件

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

css-loader:编译写入css

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

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

vue:vue主程序

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

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

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

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

babel-core:ES2015编译核心<br/>

babel-loader:编译写入ES2015文档

babel-preset-es2015:ES2015语法

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

babel-runtime:babel执行环境

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'] } }

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

$ webpack

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

后续总结:在学习打包工具过程中由于出现的问题各种蛋疼,让很多人都半途而废。我经历了半途而废又重新捡起来,搜别人的问题解决自己的问题,然后就慢慢学会了。大家互相学习共同进步!本节讲的都是很基础的东西,自己可以延展一下。还有我推荐的是webpack+ES6+vue的新手学习模式!这样你就不会被互联网技术淘汰!可以关注我,我这个人挺懒的很久才写一篇,但都是用最基础的讲通大家学习的疑惑!值得关注哦!^_^

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:小白上学のwebpack+vue初级使用指南
本站链接:http://www.codesec.net/view/482933.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(25)