<p><code></p> <p>很多<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的初学者想尝试这个框架时,都被webpack过于复杂的配置所吓倒,导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用webpack打包一个<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> Hello World应用的所有步骤详细记录下来,供<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>的初学者参考。</p> <ol> <li>安装<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>js和npm,这两个就不用说了,网上很多教程。</li> <li>本地随便新建一个文件夹,进入后运行命令npm init, 一路next下去,自动生成package.json。</li> </ol> <p>运行命令npm install –save-dev webpack-dev-server,安装一个轻量级的服务器,该服务器用于vue应用开发完毕后的本地测试。</p> <p>重复执行命令npm install –save-dev &lt;name&gt;,也就是把下列命令粘贴到cmd里进行执行:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell">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</code></pre> <p>参数-save-dev的效果是让这些安装的module出现在package.json的devDependencies区域内,如下图红色区域所示:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017579386" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>这些都是开发时依赖。我们再用下列命令安装运行时依赖:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install –save vue vuex" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell" style="word-break: break-word; white-space: initial;">npm install –save vue vuex</code></pre> <p>然后再在package.json里手动加入如下这一段内容:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017579387" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>目的是开发完毕后,使用命令npm run dev可以启动webpack-dev-server,运行我们的vue应用,并带上参数--inline --hot。</p> <ol> <li>在项目文件夹根目录下创建一个名为src的文件夹,文件夹里新建一个文件index.vue,把如下内容拷贝进去:</li> </ol> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <style> h2{ color: red; } </style> <p><template></p> <h2>Jerry: Hello, World!</h2> <p></template><br /> <script> module.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s = { data: function(){ return {}; } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-tag">h2</span>{ <span class="hljs-attribute">color</span>: red; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Jerry: Hello, World!<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> {}; } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>再回到根目录下,新建一个文件main.js:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue'; import AppJerry from './src/index.vue' new Vue({ el: &quot;#demo&quot;, components: { app: AppJerry } });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>; <span class="hljs-keyword">import</span> AppJerry <span class="hljs-keyword">from</span> <span class="hljs-string">'./src/index.vue'</span> <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">"#demo"</span>, <span class="hljs-attr">components</span>: { <span class="hljs-attr">app</span>: AppJerry } });</code></pre> <p>这段代码首先将我们在src文件夹的index.vue里实现的应用导出,存储到变量AppJerry里,再将这个应用安装到html页面id为demo的<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>标签里。安装是通过创建Vue实例并将<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>元素的id传入构造函数里进行的。当然,我们还没创建html文件,所以马上创建一个名为index.html的文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>hello world</title><br /> </head><br /> <body></p> <div id=&quot;demo&quot;> <app></app> </div> <p><script src=&quot;dist/build.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>hello world<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">app</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">app</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"dist/build.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>我们注意到这个index.html里引用了一个dist/build.js的文件,这个文件用来干嘛的?</p> <p>这里就不得不提webpack在现代前端开发技术中起的重要作用了。WebPack可以看做是模块打包机:它做的事情是,分析我们的前端项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言,比如Scss,TypeScript等,并将其打包为合适的格式以供浏览器使用。具体到我们这个例子,就是说webpack把我们src文件夹下的index.vue打包转换成浏览器能识别的js文件,webpack的输出就是dist文件夹下的build.js文件。</p> <p>为了让webpack清楚地知道它要完成什么样的任务,我们通过创建一个配置文件webpack.config.js来完成webpack任务指定。</p> <p>这个配置文件的内容:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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' } ] } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">entry</span>: <span class="hljs-string">'./main.js'</span>, <span class="hljs-attr">output</span>: { <span class="hljs-attr">path</span>: path.resolve(__dirname, <span class="hljs-string">'./dist'</span>), <span class="hljs-attr">publicPath</span>: <span class="hljs-string">'/dist/'</span>, <span class="hljs-attr">filename</span>: <span class="hljs-string">'build.js'</span> }, <span class="hljs-attr">resolve</span>: { <span class="hljs-attr">alias</span>: { <span class="hljs-string">'vue$'</span>: <span class="hljs-string">'vue/dist/vue.esm.js'</span> } }, <span class="hljs-attr">module</span>: { <span class="hljs-attr">loaders</span>: [ { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.vue$/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'vue-loader'</span> }, { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.(png|jpg|eot|svg|ttf|woff)/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'url?limit=40000'</span> } ] } }</code></pre> <p>里面定义了webpack执行任务的入口是main.js文件,任务输出的文件夹是项目文件夹里的dist目录,输出文件是build.js, webpack扫描的文件通过vue-loader指定,特征是以.vue结尾的文件。</p> <p>到目前为止,这个基于Vue的hello world应用的开发和配置都结束了,是不是很简单?</p> <p>我们可以来测试了。</p> <ol> <li>直接在命令行里敲webpack命令,就会自动执行打包操作,并在控制台上看到build.js文件成功生成的消息:</li> </ol> <p><span class="img-wrap"><img data-src="/img/remote/1460000017579388" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>这个打包后的文件尺寸很大,有323KB,包含了vue.js本身的内容和我们index.vue里的转换后的内容。下图高亮区域就是我们index.vue里的实现被webpack处理后生成对应的JavaScript代码。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017579389" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>使用npm run dev启动webpack-dev-server,看到提示说在localhost:8080上可以访问我们的应用了。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017579390" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>浏览器里访问,看到Hello World的输出,说明我们成功地走完了一个基于webpack的Vue应用开发流程。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017579391" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>要获取更多Jerry的原创文章,请关注公众号"汪子熙":</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016744495" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span>uto-orient/strip%7CimageView2/2/w/1240)</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26434.html