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

Vue2+Webpack2 从零开始到上手

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">发展历程</h2> <p>这几年前端发展迅速,几乎变成了互联网科技发展的一种强有力的附属物,一定程度上反映着互联网发展的轨迹或者说紧随其后。<br />在这里,我简单说一下我个人的理解,如有不对,勿喷,谢谢。</p> <p><span class="img-wrap"><img data-src="/img/bVRICv?w=674&amp;h=460" src="/img/bVRICv?w=674&amp;h=460" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <p>i: 该阶段,用户访问内容,全部由服务器渲染输出,在这阶段,前端工程师基本也就没什么事情,重要性跟后端工程师没法拼。</p> <p><span class="img-wrap"><img data-src="/img/bVRICB?w=659&amp;h=447" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>ii: 该阶段,html,css和js以静态文件数据存在,前端工程师就基本有活干,同时后端工程师也开始减负。</p> <p><span class="img-wrap"><img data-src="/img/bVRICM?w=617&amp;h=816" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>iii: ajax的发明,让js担当更多的责任<br />iv: js的模块化规范开始广泛讨论,有AMD,CMD两种,AMD以RequireJS领头,CMD以SeaJS领头(同时<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>的发明,js开始进入后端开发领域,以commonJS为规范)</p> <h2 id="articleHeader1">简介</h2> <p>随着js的发展或互联网产品用户体验概念的深入,前端越来越受程序员及公司们关注。组件化的系统架构思想,本以往所有的系统架构思想都只会出现在后端,可当下,前端工作或系统越来越庞大,越显臃肿。而组件化中,首当其冲的是angularJS,reactJs和vue。而angularJS对我来说,它具备着很多后端开发的思想,带进了很多新概念,入门有点难度,所以,我不太建议;而reactJS稍微有了解,但是render部分似乎并没有vue做得简单,明了。所以,本文之后介绍vue2+webpack2的组件开发。</p> <h2 id="articleHeader2"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>JS</h2> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>JS是构建用户界面的js框架。简答使用,可以直接下载官方的vue.js库文件,类似jquery库一样,放到html中去,使用类似<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> vue=<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>() 语法即可使用vue框架的特性,如<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>。单单<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>就很值得大家去尝试,极大提高前端的开发效率,甚至我对我以往html的拼接方式,jquery获取各个输入框值等这些做法不忍回首。<br />详情可见:<a href="https://cn.vuejs.org/v2/guide/" rel="nofollow noreferrer" target="_blank">介绍-Vue.js</a></p> <h2 id="articleHeader3">webpack</h2> <p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>、图片、 JSON、Coffeescript、 LESS 等。详情可见:<a href="https://segmentfault.com/a/1190000009454172">从0到1搭建webpack2+vue2自定义模板详细教程</a></p> <p><span class="img-wrap"><img data-src="/img/bVRIH2?w=800&amp;h=342" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>上述图片也许不太容易理解,我根据目前自己的理解做了一张图解,如下:</p> <p><span class="img-wrap"><img data-src="/img/bVRIS4?w=916&amp;h=494" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h2 id="articleHeader4">环境搭建</h2> <p>我极力推荐Vue-cli脚手架方式来初始化项目,因为当你发现你上网找到的文章例子运行不了时候(可能vue或webpack版本不符或loaders没加载完全),那已经浪费不少时间。具体步骤可见:<a href="http://www.92to.com/bangong/2017/05-21/22118270.html" rel="nofollow noreferrer" target="_blank">vue2 webpack2 脚手架 详解使用vue脚手架工具搭建vue-webpack项目</a></p> <h3 id="articleHeader5">Tips</h3> <p>esl<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>t: 通过文章中的操作,已经可以运行vue2+webpack2的项目,但是如果修改里面某一行或增加一个简单v-on:click操作,似乎困难重重。我简单增加了一个操作,本以为会成功运行,但是没想到会出现类似编译错误问题。后来才发现,原来忽视了esl<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a>,至于esl<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>t是什么,大家可点击查看:<a href="http://www.jianshu.com/p/29ca5a6a34fd" rel="nofollow noreferrer" target="_blank">ESLint入坑</a></p> <h2 id="articleHeader6">组件间通信</h2> <p>在整个前端系统来说,组件间通信肯定是必不可少的一部分。如搜索页面,顶部是搜索框的组件,下面是搜索到的内容列表组件;再如一个表格内容中,有针对某个条目进行删除,删除后表格头部更新条目数量。<br />在组件通信中,父组件-&gt;子组件通过属性参数进行传递,而子组件-&gt;父组件则通过事件冒泡进行通知。如下图:<br /><span class="img-wrap"><img data-src="/img/bVRIgm?w=897&amp;h=584" 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="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<template></p> <div class=&quot;hello&quot;> <h1>{{ msg }}</h1> <p> <input type=&quot;text&quot; v-model=&quot;msg&quot; placeholder=&quot;请输入信息&quot; /></p> <h2 @click=&quot;show&quot;>Essential L<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>ks</h2> <p> <Child :msg=&quot;msg&quot; @childmessage=&quot;receiveMessage&quot;></Child> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> Child from './Child';</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> { <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>: 'hello', data() { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { msg: 'Welcome to My Vue.js App' }; }, methods: { show() { <a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.msg); }, receiveMessage() { console.log('我是父组件,我收到信息了'); } }, components: { Child: Child } }; </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</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">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"msg"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入信息"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"show"</span>&gt;</span>Essential Links<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Child</span> <span class="hljs-attr">:msg</span>=<span class="hljs-string">"msg"</span> @<span class="hljs-attr">childmessage</span>=<span class="hljs-string">"receiveMessage"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Child</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">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> Child <span class="hljs-keyword">from</span> <span class="hljs-string">'./Child'</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> { <span class="hljs-attr"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>: <span class="hljs-string">'hello'</span>, data() { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">'Welcome to My Vue.js App'</span> }; }, <span class="hljs-attr">methods</span>: { show() { <a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.msg); }, receiveMessage() { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'我是父组件,我收到信息了'</span>); } }, <span class="hljs-attr">components</span>: { <span class="hljs-attr">Child</span>: Child } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</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="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<template></p> <ul> <li v-for=&quot;item in list&quot;><a v-bind:href=&quot;item.url&quot; target=&quot;_blank&quot;>{{item.name}}</a></li> <li v-show=&quot;msg&quot;>{{msg}}</li> <li @click=&quot;send()&quot;>发送消息给父组件</li> </ul> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> data from '@/../<a href="http://www.js-code.com/tag/static" title="static" target="_blank">static</a>/data';</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> { <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>: 'child', data() { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { list: data.<a href="http://www.js-code.com/tag/link" title="link" target="_blank">link</a>s }; }, methods: { send() { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit('childmessage', '消息内容'); } }, props: { msg: <a href="http://www.js-code.com/tag/String" title="String" target="_blank">String</a> } }; </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a></span>=<span class="hljs-string">"item in list"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">v-bind:href</span>=<span class="hljs-string">"item.url"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>{{item.name}}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"msg"</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"send()"</span>&gt;</span>发送消息给父组件<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</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-keyword">import</span> data <span class="hljs-keyword">from</span> <span class="hljs-string">'@/../<a href="http://www.js-code.com/tag/static" title="浏览关于“static”的文章" target="_blank" class="tag_link">static</a>/data'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'child'</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">list</span>: data.<a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a>s }; }, <span class="hljs-attr">methods</span>: { send() { <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'childmessage'</span>, <span class="hljs-string">'消息内容'</span>); } }, <span class="hljs-attr">props</span>: { <span class="hljs-attr">msg</span>: <span class="hljs-built_in"><a href="http://www.js-code.com/tag/String" title="浏览关于“String”的文章" target="_blank" class="tag_link">String</a></span> } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>以上解决了父组件-&gt;子组件的消息传递,子组件-&gt;父组件的事件传递,但是如果是祖父组件到子组件,那么还需要经过父组件?兄弟组件的消息传递又该会是怎么样?敬请后续文章。</p> <p></code></p>

总结

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

Vue2+Webpack2 从零开始到上手

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

Vue2+Webpack2 从零开始到上手

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

80%的人都看过