Vue笔记二:进阶[译]用Webpack构建Vue
来源:互联网 发布:阿里云多少钱一年 编辑:程序博客网 时间:2024/06/05 02:19
转载自:http://www.jianshu.com/p/a5361bff1cd8
github源码在此,记得点星:
https://github.com/brandonxiang/example-vue-webpack我一直想试着一下翻译别人的文章,因为总是觉得自己的文章写的不是很好。希望从中学习一下。
原文Vue.js build set-up from scratch with webpack, vue-loader and hot reload。译文内容和原文内容可能有点出入,可能会带有我个人的思路,敬请原谅,版权由原文所有。
通过webpack,vue-loader 和 hot reload来构建Vue.js
Vue.js是我如今最喜欢的JavaScript界面构建工具。这篇文章会告诉你如何去通过Vue.js,热模块替换,webpack和整个vue生态去构建一个项目。
介绍
从2007年起开发Javascript以来,我喜欢angular,react和ember。但是真正让我看到闪光点的是vuejs。对于所有人所有问题来说,它不是最完美的解决方案,但是我看到了它的价值。
这是真的Javascript的一个潮流,特别是在react社区做一个模块实现一个功能,并允许用户将它们模块黏合在一起。这篇文章受文章的激发。这里有很多react 模板,包括一些过时,一些存在问题,一些不能工作的。
在写文章的这段时间,Vue的开发者完善了官方入门者工具,包括命令行构建一个新项目,给出了一个明确和易于维护的起点。
但是,你自己构建项目也有几个优点:
- 你的项目需求和模板的不同
- 你需要一些新东西,如预处理和工具链,你不要拆散这些工具
- 你不需要模板的一些库
那就是说,作者觉得模板是非常值得去学的资源,而且你可以拿到一些提示,你读代码后你会选择现成的模板。
开始前
我验证了一下操作说明在2015/12/28在最新版Node.js 在Ubuntu Linux。
所有的命令列在下面
$ ls <- Run this in root directory of our project$ (public/) ls <- Run this in the 'public' directory
1: 创建基本结构
创建一个项目叫做myapp在一个空白文件夹中。这个目录将会是项目的根目录。
$ mkdir myapp$ cd myapp/
创建一个没有任何依赖关系的package.json
,可以通过npm init
。
{ "name": "myapp", "version": "0.0.1", "description": "My app", "dependencies": { }, "devDependencies": { }, "author": "You"}
创建一个index.html
在该文件。这是真正显示在服务器的html。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Vue Example</title> </head> <body> <h3>{{ message }}</h3> <script src="dist/build.js"></script> </body></html>
注意下面的两点:
dist/build.js
并不存在{{message}}
的数据会被vue文件所填入
创建一个src
文件夹和加上文件src/main.js
:
import Vue from 'vue'new Vue({ el: 'body', data: { message: "Hello Vue" }})
这样我们就完成了一个关于vuejs骨架,但是它还需要丰富。
2.基本webpack构建
创建一个webpack.config.js
:
module.exports = { // 这是一个主文件包括其他模块 entry: './src/main.js', // 编译的文件路径 output: { //`dist`文件夹 path: './dist', // 文件 `build.js` 即 dist/build.js filename: 'build.js' }, module: { // 一些特定的编译规则 loaders: [ { // 让webpack去验证文件是否是.js结尾将其转换 test: /\.js$/, // 通过babel转换 loader: 'babel', // 不用转换的node_modules文件夹 exclude: /node_modules/ } ] }}
创建一个文件.babelrc
。Babel是一个工具你可以转换ES6到现在的Javascript。Vue需要配置es2015
和stage-0
:
{ "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"]}
在命令行中安装webpack:
$ npm install -g webpack
安装本地库(作为dev dependencies
),需要在package.json
中添加devDependencies
的部分。
"babel-core": "^6.1.2","babel-loader": "^6.1.0","babel-plugin-transform-runtime": "^6.1.2","babel-preset-es2015": "^6.1.2","babel-preset-stage-0": "^6.1.2","babel-runtime": "^5.8.0","webpack": "^1.12.2"
在保存后,运行:
$ npm install
注意我推荐用的是Vue初学者工具中最佳支持的版本,因为有时候最新的版本不能很好的支持。
最后,vuejs库安装到你的dependencies
中。
$ npm install --save vue
如今你可以创建一个app用WebPack,运行
$ webpack
你可以看到输出文件:
Hash: 6568e32467dc12c8aeebVersion: webpack 1.12.9Time: 743ms Asset Size Chunks Chunk Namesbuild.js 246 kB 0 [emitted] main + 3 hidden modules
你打开index.html
。如果你在浏览器上看到Hello Vue,那就做的非常好。恭喜,你基本完成基本的Vue项目。
Step one and two 源码
3.vue-loader和.vue文件
现在我们要去做vuejs最奇妙的部分,构建组件通过.vue
文件。
保存你的index.html
如这样。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Vue Example</title> </head> <body> <app></app> <script src="dist/build.js"></script> </body></html>
注意如今,用一个viewmodel替换根节点,用一个叫app
的组件嫁接在<app></app>
。
把你的main.js的代码改成:
import Vue from 'vue'import App from './app.vue'new Vue({ el: 'body', components: { App }})
现在,注意我通过app.vue
取一个部件叫App,并且将模板镶嵌在body元素中。
我们会创建一个文件src/app.vue
,并加上这些代码:
<template><div class="message">{{ msg }}</div></template><script>export default { data () { return { msg: 'Hello from vue-loader!' } }}</script><style>.message { color: blue;}</style>
在这个文件中,我们设置了style,定义了脚本的一些功能和定义了HTML的模板。如果你想知道它是怎么执行的,参考vue文档。
重新运行一下webpack
,我们看到变化。
Hash: c71cc00f645706203ac4Version: webpack 1.12.9Time: 749ms Asset Size Chunks Chunk Namesbuild.js 246 kB 0 [emitted] main [3] ./src/app.vue 0 bytes [built] [failed] + 3 hidden modulesERROR in ./src/app.vueModule parse failed: /home/anirudh/work/misc/vue-scaffold/example/src/app.vue Line 1: Unexpected token <You may need an appropriate loader to handle this file type.| <template>| <div class="message">{{ msg }}</div>| </template> @ ./src/main.js 7:11-31
Webpack不懂得如何去处理.vue
的新语法。修改你的webpack配置文件。
module.exports = { entry: './src/main.js', output: { path: './dist', publicPath: 'dist/', filename: 'build.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\.vue$/, loader: 'vue' } ] }, vue: { loaders: { js: 'babel' } }}
现在你可以加上一些库到你的package.json
在devDependencies
:
"css-loader": "^0.23.0", "style-loader": "^0.13.0", "vue-loader": "^7.3.0", "vue-html-loader": "^1.0.0",
运行npm install
获取新的库,然后,运行webpack
。
Hash: 740a1d3c85161f03a0cfVersion: webpack 1.12.9Time: 1355ms Asset Size Chunks Chunk Namesbuild.js 258 kB 0 [emitted] main + 11 hidden modules
当你打开浏览器,你可以看到标题"Hello from vue-loader"蓝色字。这就意味着你的样式和JS都编译成功。
Step three 源码
4.热模块替代/热更新
热模块替代或热更新是当今最热门新的技术。它让你保存 JavaScript文件,就把对应的组件实时更新。
原来的表现如下:
- 写一个App
- 在浏览器加载,并试用它
- App进入一个状态被Vue所渲染在屏幕
这时,你想要一个快速修改或修复一个bug。你需要重新加载页面,操作所有的步骤到那个指定状态。
热更新让整个步骤变得简单:
- 打开一个App,操作到指定状态
- 修改源代码并保存
- Webpack识别到代码变化,它重新编译被更改的指定模块
- Webpack利用类似websockets的技术上传代码和更改线上浏览器的效果
- Vue检测新的数据模型和热补丁, 和重新渲染app并保存着完整的状态
第一步我们需要用WebPack的dev server
。 首先,修改你的devDependencies
在package.json
。
"vue-hot-reload-api": "^1.2.0",
运行一下代码
$ npm install$ npm install -g webpack-dev-server$ webpack-dev-server --inline --hot
当你用webpack-dev-server
,你会看到一个很大的输出:
http://localhost:8080/webpack result is served from /dist/content is served from /home/anirudh/work/misc/vue-scaffold/exampleHash: ef5ed1df9062de968cb6Version: webpack 1.12.9Time: 1773ms Asset Size Chunks Chunk Namesbuild.js 511 kB 0 [emitted] mainchunk {0} build.js (main) 465 kB [rendered] [0] multi main 52 bytes {0} [built] [2] (webpack)-dev-server/client?http://localhost:8080 2.48 kB {0} [built] [3] (webpack)/~/url/url.js 22.3 kB {0} [built] [... omitted for brevity ...] [85] ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/app.vue 58 bytes {0} [built] [86] ./~/vue-hot-reload-api/index.js 5.62 kB {0} [built]webpack: bundle is now VALID.
当你打开浏览器输入http://localhost:8080
之后,你能看到一样的结果。但是不能真正的展示出Vue的热模块替换的牛逼之处。
接下来,你改你的src/app.vue
:
<template><div class="message">Value is: {{ count }}</div><a href="#" @click.prevent="increment">Increment</a></template><script>export default { data () { return { count: 0 } }, methods: { increment () { this.count ++; } }}</script><style></style>
刷新http://localhost:8080
,你可以看到一个计数器和增加按钮。 你点击计数器就会增加。
现在你更新代码,改样式,改按钮名字或按钮的功能。你保存,组件就更新但是计数器的值还保持不变。
Step four 源码
接下来
这并不是你项目需要的所有,但是它是你需要构建Vue的全部。但是在你要开始写App前,你还要花时间去Google和创建:
分开开发和产品的构建方式
你如果想独立为产品最小构建方式。你可以参考一下vue-loader-example webpack config。
注意,移动你的webpack.config
至一个特定文件夹需要你在命令行特别声明。
测试
测试其实超出了这教程的范围,测试取决于你App本身。 参考vue-loader-example test example的代码。
图片,静态文件,CSS
你需要自定义CSS和图片文件,webpack可以通过loader像file-loader
,url-loader
来优化开发流程。
检查错误
你可以用eslint-loader
配置eslint
直接运行Webpack。vue-loader-example 设置好.eslintrc
文件。
转载,请表明出处。总目录前端收集器
- Vue笔记二:进阶[译]用Webpack构建Vue
- 用Webpack构建Vue
- 用Webpack构建Vue
- 浅谈用webpack构建Vue
- webpack 构建Vue项目
- vue + webpack 构建项目
- vue + webpack 构建项目
- vue配置 webpack构建vue项目
- webpack + vue 笔记
- vue+webpack构建项目过程
- vue+webpack构建项目过程
- webpack构建vue-cli环境
- Vue+webpack构建单页router应用(二)
- vue+webpack构建单页面应用笔记(不断更新中。。。)
- webpack---webpack构建vue多页面框架(二、webpak.config.js)
- vue + webpack
- Webpack + vue-loader构建单文件vue组件
- Vue+webpack学习案例(一)-构建Vue项目
- react知识点
- 蓝桥杯进制转换JAVA
- Cocoapods详解之---进阶篇2
- 基于CMake的JNI开发探索
- 在AE中通过指定中心点和半径画圆
- Vue笔记二:进阶[译]用Webpack构建Vue
- 国外大神说-在编程中使用If语句的潜在危险
- 可持久化并查集(二)——从镜像到动态
- Android Studio将项目打包成apk
- iOS百度地图更新位置
- react-native
- 物联网卡的使用
- 大步小步法解决离散对数问题 by——miskcoo
- 剑指Offer:二维数组中的查找