摘要:但我们今天学的是,原因我还不会而且新手还是学习为主吧。原因中文文档全,学习曲线简单,很容易上手。后续总结在学习打包工具过程中由于出现的问题各种蛋疼,让很多人都半途而废。大家互相学习共同进步本节讲的都是很基础的东西,自己可以延展一下。
写这篇文章的时候先说一下原因:
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
Vue example {{message}}
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 vue@1.0 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编译核心
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的新手学习模式!这样你就不会被互联网技术淘汰!可以关注我,我这个人挺懒的很久才写一篇,但都是用最基础的讲通大家学习的疑惑!值得关注哦!^_^
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/80676.html
摘要:以上代码功能很简单,就是把定义为一个模块,在中引用,最终两文件中要添加的内容都显示在中。我们的任务完成了,成功生成,合并,引入了,被执行了。安装,处理文件。 前言: 本套教程是零基础学打包工具webpack; 后面会结合gulp+webpack搞定所有你得需求; 闲谈: 百度搜了一下,虽然教程多,但是杂乱无章,实用的没多少,都是匆匆了事,所以我就自己学了两天,现在从最底层教大家完成we...
摘要:以上代码功能很简单,就是把定义为一个模块,在中引用,最终两文件中要添加的内容都显示在中。我们的任务完成了,成功生成,合并,引入了,被执行了。安装,处理文件。 前言: 本套教程是零基础学打包工具webpack; 后面会结合gulp+webpack搞定所有你得需求; 闲谈: 百度搜了一下,虽然教程多,但是杂乱无章,实用的没多少,都是匆匆了事,所以我就自己学了两天,现在从最底层教大家完成we...
摘要:以上代码功能很简单,就是把定义为一个模块,在中引用,最终两文件中要添加的内容都显示在中。我们的任务完成了,成功生成,合并,引入了,被执行了。安装,处理文件。 前言: 本套教程是零基础学打包工具webpack; 后面会结合gulp+webpack搞定所有你得需求; 闲谈: 百度搜了一下,虽然教程多,但是杂乱无章,实用的没多少,都是匆匆了事,所以我就自己学了两天,现在从最底层教大家完成we...
摘要:二次以及三次贝塞尔曲线都十分有用,一般用来绘制复杂有规律的图形。绘制三次贝塞尔曲线,为结束点,为控制点一,为控制点二。下边的图能够很好的描述两者的关系,二次贝塞尔曲线有一个开始结束点蓝色以及一个控制点红色,而三次贝塞尔曲线使用两个控制点。 元素 看起来和 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上, 标签只有两个属性—— width和height。当没有...
阅读 2878·2021-11-17 09:33
阅读 1567·2021-10-12 10:13
阅读 2307·2021-09-22 15:48
阅读 2166·2019-08-29 17:19
阅读 2561·2019-08-26 11:50
阅读 1527·2019-08-26 10:37
阅读 1687·2019-08-23 16:54
阅读 2891·2019-08-23 14:14