脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>写这篇文章的时候先说一下原因:<br />webpack:现在很流行的打包工具;推荐原因:学习成本比gulp,fis3等简单,就是这么直接!<br />vue:国人开发的MVVM框架,一点都不逊于recat,vue2.0的执行速度比recat都快!推荐原因:<a href="http://www.cnblogs.com/terry01/p/5938153.html" rel="nofollow noreferrer" target="_blank">http://www.cnblogs.com/terry0...</a>这里很权威。但我们今天学的是vue1.0,原因:vue2.0我还不会(^_^)!而且新手还是vue1.0学习为主吧。原因:中文文档全,学习曲线简单,很容易上手。</p> <p>课程开始:<br />需要技能:<br />1&gt;.<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>.js环境<br />2&gt;.npm 会使用 (我的笔记中有smart-npm可以解决npm慢的问题)<br />3&gt;.vue 最基本的{{}}符号会用(不会的去vue官网看5分钟教程就会)<br />4&gt;.ES6 基本知道import是什么东西就行</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>适用学习人群:用过vue,但不知道如何和webpack一起结合使用的迷茫者;<br /><strong>项目创建</strong><br />这里已经安装过<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>js,npm,webpack<br />1.用命令行工具进入你需要创建模板文件夹输入:</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="$ mkdir myvuetest $ cd myvuetest $ npm init" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs shell"><code><span class="hljs-meta">$</span><span class="bash"> mkdir myvuetest</span> <span class="hljs-meta">$</span><span class="bash"> <span class="hljs-built_in">cd</span> myvuetest</span> <span class="hljs-meta">$</span><span class="bash"> npm init</span></code></pre> <p>你会发现文件中出现了package.json暂时不用管;</p> <p>2.在项目目录下新建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><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> example</title><br /> </head><br /> <body></p> <div>{{message}}</div> <p> <script src=&quot;dist/build.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> example<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>&gt;</span>{{message}}<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>3.在根目录创建src文件夹,并在该文件夹下建立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' new Vue({ el:'body', data:{ message:'test success!' } });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">'body'</span>, data:{ message:<span class="hljs-string">'test success!'</span> } });</code></pre> <p><strong>设置webpack</strong><br />1.安装webpack,webpack-dev-server以及相关的loaders</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="# 全局安装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 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code><span class="hljs-comment"># 全局安装webpack,webpack-dev-server,全局安装因为其他项目也会使用到这两个包</span> $ npm <span class="hljs-keyword">install</span> -g webpack $ npm <span class="hljs-keyword">install</span> -g webpack-dev-<span class="hljs-keyword">server</span> <span class="hljs-comment"># 为项目安装其他依赖 下面i是install的简写,注意vue@1.0是安装vue1.0版本的不然会出错;-D是--save-dev的简写,用于生成package.json中对应的包名称,便于日后管理</span> $ npm i webpack-<span class="hljs-keyword">merge</span> css-loader <span class="hljs-keyword">style</span>-loader <span class="hljs-keyword">file</span>-loader <span class="hljs-keyword">url</span>-loader <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-core babel-loader babel-<span class="hljs-keyword">plugin</span>-transform-runtime babel-preset-es2015 babel-preset-stage<span class="hljs-number">-0</span> babel-runtime vue@<span class="hljs-number">1.0</span> vue-loader vue-html-loader vue-<span class="hljs-keyword">style</span>-loader vue-hot-reload-api -D </code></pre> <p>这里解释一部分包的作用:<br />webpack-dev-server: 用户建立node的服务器环境,就是可以用lacalhost:8080等端口方式浏览文件 <br />webpack-merge:开发环境和生产环节的webpaak配置文件的配置合并<br />css-loader:编译写入css<br />style-loader:把编译后的css整合进html<br />file-loader:编译写入文件,默认情况下生成文件的文件名是文件名与MD5哈希值的组合<br />vue:vue主程序<br />vue-laoder:编译写入.vue文件<br />vue-html-loader:编译vue的template部分<br />vue-style-loader:编译vue的样式部分<br />vue-hot-reload-api:webpack对vue实现热替换<br /><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-core:ES2015编译核心&lt;br/&gt;<br /><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-loader:编译写入ES2015文档<br />babel-preset-es2015:ES2015语法<br />babel-preset-stage-0:开启测试功能<br />babel-runtime:babel执行环境</p> <p>2.配置webpack.config.js<br />在根目录下建立webpack.config.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="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'] } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><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>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { entry: <span class="hljs-string">'./src/main.js'</span>, <span class="hljs-comment">//定义webpack输出的文件,这里设置了让打包后生成的文件放在dist文件夹下的build.js文件中</span> output: { path: <span class="hljs-string">'./dist'</span>, publicPath:<span class="hljs-string">'dist/'</span>, filename: <span class="hljs-string">'build.js'</span> }, <span class="hljs-keyword">module</span>: { loaders: [ <span class="hljs-comment">//转化ES6语法</span> { test: <span class="hljs-regexp">/.js$/</span>, loader: <span class="hljs-string">'babel'</span>, exclude: <span class="hljs-regexp">/node_modules/</span> }, <span class="hljs-comment">//图片转化,小于8K自动转化为base64的编码</span> { test: <span class="hljs-regexp">/.(png|jpg|gif)$/</span>, loader:<span class="hljs-string">'url-loader?limit=8192'</span> } ] }, <span class="hljs-comment">//这里用于安装babel,如果在根目录下的.babelrc配置了,这里就不写了</span> babel: { presets: [<span class="hljs-string">'es2015'</span>,<span class="hljs-string">'stage-0'</span>], plugins: [<span class="hljs-string">'transform-runtime'</span>] } }</code></pre> <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="$ webpack" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs shell"><code style="word-break: break-word; white-space: initial;"><span class="hljs-meta">$</span><span class="bash"> webpack</span></code></pre> <p>打开index.html就可以看到浏览器中看到我们刚刚写的文字了。</p> <p>后续总结:在学习打包工具过程中由于出现的问题各种蛋疼,让很多人都半途而废。我经历了半途而废又重新捡起来,搜别人的问题解决自己的问题,然后就慢慢学会了。大家互相学习共同进步!本节讲的都是很基础的东西,自己可以延展一下。还有我推荐的是webpack+ES6+vue的新手学习模式!这样你就不会被互联网技术淘汰!可以关注我,我这个人挺懒的很久才写一篇,但都是用最基础的讲通大家学习的疑惑!值得关注哦!^_^</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过