摘要：运行命令，安装一个轻量级的服务器，该服务器用于应用开发完毕后的本地测试。到目前为止，这个基于的应用的开发和配置都结束了，是不是很简单我们可以来测试了。浏览器里访问，看到的输出，说明我们成功地走完了一个基于的应用开发流程。
很多Vue的初学者想尝试这个框架时，都被webpack过于复杂的配置所吓倒，导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用webpack打包一个Vue Hello World应用的所有步骤详细记录下来，供Vue的初学者参考。
安装nodejs和npm，这两个就不用说了，网上很多教程。
本地随便新建一个文件夹，进入后运行命令npm init, 一路next下去，自动生成package.json。
运行命令npm install –save-dev webpack-dev-server，安装一个轻量级的服务器，该服务器用于vue应用开发完毕后的本地测试。
重复执行命令npm install –save-dev
npm install –save-dev css-loader npm install –save-dev vue-template-compiler npm install –save-dev webpack npm install –save-dev vue-loader npm install –save-devvue-router
参数-save-dev的效果是让这些安装的module出现在package.json的devDependencies区域内，如下图红色区域所示：
这些都是开发时依赖。我们再用下列命令安装运行时依赖：
npm install –save vue vuex
然后再在package.json里手动加入如下这一段内容：
目的是开发完毕后，使用命令npm run dev可以启动webpack-dev-server，运行我们的vue应用，并带上参数--inline --hot。
在项目文件夹根目录下创建一个名为src的文件夹，文件夹里新建一个文件index.vue，把如下内容拷贝进去：
Jerry: Hello, World!
再回到根目录下，新建一个文件main.js:
import Vue from "vue";
import AppJerry from "./src/index.vue"
new Vue({
el: "#demo",
components: {
app: AppJerry
}
});
这段代码首先将我们在src文件夹的index.vue里实现的应用导出，存储到变量AppJerry里，再将这个应用安装到html页面id为demo的div标签里。安装是通过创建Vue实例并将div元素的id传入构造函数里进行的。当然，我们还没创建html文件，所以马上创建一个名为index.html的文件：
hello world
我们注意到这个index.html里引用了一个dist/build.js的文件，这个文件用来干嘛的？
这里就不得不提webpack在现代前端开发技术中起的重要作用了。WebPack可以看做是模块打包机：它做的事情是，分析我们的前端项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，比如Scss，TypeScript等，并将其打包为合适的格式以供浏览器使用。具体到我们这个例子，就是说webpack把我们src文件夹下的index.vue打包转换成浏览器能识别的js文件，webpack的输出就是dist文件夹下的build.js文件。
为了让webpack清楚地知道它要完成什么样的任务，我们通过创建一个配置文件webpack.config.js来完成webpack任务指定。
这个配置文件的内容：
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/",
filename: "build.js"
},
resolve: {
alias: {
"vue$": "vue/dist/vue.esm.js"
}
},
module: {
loaders: [
{
test: /.vue$/,
loader: "vue-loader"
},
{
test: /.(png|jpg|eot|svg|ttf|woff)/,
loader: "url?limit=40000"
}
]
}
}
里面定义了webpack执行任务的入口是main.js文件，任务输出的文件夹是项目文件夹里的dist目录，输出文件是build.js, webpack扫描的文件通过vue-loader指定，特征是以.vue结尾的文件。
到目前为止，这个基于Vue的hello world应用的开发和配置都结束了，是不是很简单？
我们可以来测试了。
直接在命令行里敲webpack命令，就会自动执行打包操作，并在控制台上看到build.js文件成功生成的消息：
这个打包后的文件尺寸很大，有323KB，包含了vue.js本身的内容和我们index.vue里的转换后的内容。下图高亮区域就是我们index.vue里的实现被webpack处理后生成对应的JavaScript代码。
使用npm run dev启动webpack-dev-server，看到提示说在localhost:8080上可以访问我们的应用了。
浏览器里访问，看到Hello World的输出，说明我们成功地走完了一个基于webpack的Vue应用开发流程。
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
uto-orient/strip%7CimageView2/2/w/1240)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100584.html
摘要：构造函数文件路径初始化这里只拿对例子理解最关键的步骤分析。在最后，调用了对数据进行。每个函数之后都会返回一个。就是去实例化指令，将指令和新建的元素在一起，然后将元素替换到中去。 下面的代码会在页面上输出Hello World，但是在这个new Vue()到页面渲染之间，到底发生了什么。这篇文章希望通过最简单的例子，去了解Vue源码过程。这里分析的源码版本是Vue.version = 1...
摘要：对于客户端应用来说，服务端渲染是一个热门话题。在服务器预渲染初始应用状态。重构这段脚本，使其可以在服务端运行。如果这些原因和你的情况吻合，那么使用进行服务端渲染将会是个不错方案。我已经发布两个库来支持的服务端渲染和专为应用打造的。 showImg(https://segmentfault.com/img/remote/1460000014155032);对于客户端应用来说，服务端渲染是...
摘要：需要注意的地方输入法状态调整为英文状态代码的缩进不要忘记分号下面图片标注内容。语句语句是程序最小的一个执行单位，像一个指令，程序中，必须使用一个英文分号结束一条语句。建议，第一个简单的程序，我已经详细的为你做了演练与解释。 在上一篇文章 【[准备编译环境】]()中我们完成了 Java 编译环境的搭建，这篇文章内容主要是来教你怎么开始编写第一个 Java 程序，并运行它。 分为两个步骤，...
摘要：快速入门教程，此教程包括使用的组件。的核心是能够使用简单的模板语法以声明方式将数据呈现给。到目前为止，它看起来并没有太大的不同。如果我们点击下拉菜单，我们会得到两个选择或。在下拉菜单中选择不同的选项，上面的文本也将相应的发生变化。 Vue快速入门教程，此教程包括使用Kendo UI for Vue的组件。希望通过此教程能够成为你学习vue的一个很好的起点。这其中还包含一个可扩展的事例，...
阅读 3142·2023-04-25 17:19
阅读 592·2021-11-23 09:51
阅读 1323·2021-11-08 13:19
阅读 759·2021-09-29 09:34
阅读 1658·2021-09-28 09:36
阅读 1458·2021-09-22 14:59
阅读 2675·2019-08-29 16:38
阅读 2017·2019-08-26 13:40
