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

慕课网vue教程“饿了么” ,在vue2.5vue-cli3 怎么写

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0">慕课网<a href="http://www.js-code.com/tag/vue%e6%95%99%e7%a8%8b" title="vue教程" target="_blank">vue教程</a>“饿了么” 数据请求,在vue-cli3 怎么写</h3> <p>哇我真的纠结了好久查了好多资料,话不多说上代码,<br />主要牵扯到webpack的 devServe配置<br />主要是原来是在webpack.dev.conf.js的devServer<br />现在是在根目录下修改<code>vue.config.js</code>的devServer</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="module.exports = { devServer: { before (app) { var appData = require('./data.json') var seller = appData.seller var goods = appData.goods var ratings = appData.ratings app.get('/api/seller', (req, res) => {<br /> res.json({<br /> errno: 0,<br /> data: seller<br /> })<br /> })<br /> // app is the express instance that the dev server uses<br /> app.get('/api/goods', (req, res) => {<br /> res.json({<br /> errno: 0,<br /> data: goods<br /> })<br /> })<br /> app.get('/api/ratings', (req, res) => {<br /> res.json({<br /> errno: 0,<br /> data: ratings<br /> })<br /> })<br /> }<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><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 = { devServer: { before (app) { <span class="hljs-keyword">var</span> appData = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./data.json'</span>) <span class="hljs-keyword">var</span> seller = appData.seller <span class="hljs-keyword">var</span> goods = appData.goods <span class="hljs-keyword">var</span> ratings = appData.ratings app.get(<span class="hljs-string">'/api/seller'</span>, <span class="hljs-function">(<span class="hljs-params">req, res</span>) =&gt;</span> { res.json({ errno: <span class="hljs-number">0</span>, data: seller }) }) <span class="hljs-comment">// app is the express instance that the dev server uses</span> app.get(<span class="hljs-string">'/api/goods'</span>, <span class="hljs-function">(<span class="hljs-params">req, res</span>) =&gt;</span> { res.json({ errno: <span class="hljs-number">0</span>, data: goods }) }) app.get(<span class="hljs-string">'/api/ratings'</span>, <span class="hljs-function">(<span class="hljs-params">req, res</span>) =&gt;</span> { res.json({ errno: <span class="hljs-number">0</span>, data: ratings }) }) } } }</code></pre> <p>谁知道怎么改一下这个eslint对缩进的要求吗?</p> <p><span class="img-wrap"><img data-src="/img/bV8KFh?w=1371&amp;h=1364" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bV8Klz?w=1243&amp;h=1349" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>一点疑问,这个是不是可以用ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>做阿<br />不是很懂区别</p> <p>相关资料网址:</p> <p><a href="https://github.com/vuejs/vue-cli/tree/dev/docs" rel="nofollow noreferrer" target="_blank">vue-cli3.0官方文档</a><br /><a href="https://forum.vuejs.org/t/why-does-vue-cli3-structure-this-way/32289" rel="nofollow noreferrer" target="_blank">我在vue官方论坛的提问</a><br /><a href="https://webpack.js.org/configuration/dev-server/#devserver-before" rel="nofollow noreferrer" target="_blank">webpack-devServer官方文档</a><br /><a href="https://www.xiuyuan.info/?p=230" rel="nofollow noreferrer" target="_blank">vue2.x写法1</a><br /><a href="https://blog.csdn.net/qq_34645412/article/details/78833860" rel="nofollow noreferrer" target="_blank">vue2.x写法2</a><br /><a href="https://segmentfault.com/a/1190000012060181">vue2.x写法3</a></p> <h3 id="articleHeader1">文档结构</h3> <p>我自己新建了一些文件夹<br /><a href="https://segmentfault.com/a/1190000014456796" target="_blank">参见我写的这篇</a></p> <h3 id="articleHeader2">router-link代替a标签</h3> <p><a href="https://router.vuejs.org/zh-cn/essentials/getting-started.html" rel="nofollow noreferrer" target="_blank">https://router.vuejs.org/zh-c...</a><br />开始页的最下面有这样一句话:</p> <blockquote><p>当 &lt;router-link&gt; 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active,</p></blockquote> <p>所以你只需要在自己的STYLE文件中,写了.router-link-active的样式,列表选中后,系统就会自动去绑定这个样式</p> <p><a href="https://router.vuejs.org/zh-cn/api/router-link.html" rel="nofollow noreferrer" target="_blank">https://router.vuejs.org/zh-c...</a></p> <blockquote><p>active-class<br />类型: string<br />默认值: "router-link-active"<br />设置 链接激活时使用的 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 类名。默认值可以通过路由的构造选项 linkActive<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a> 来全局配置。</p></blockquote> <p>其实这个也是为了方便导航栏切换状态的,设置这个属性就可以让链接在激活时自动切换相应的样式。 </p> <p>本例中,在<code>app.vue</code>中</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="<template></p> <div> <v-header></v-header></p> <div class=&quot;tab&quot;> <div class=&quot;tab-item&quot;> <router-link to=&quot;/goods&quot;>商品</router-link> </div> <div class=&quot;tab-item&quot;> <router-link to=&quot;/ratings&quot;>评论</router-link> </div> <div class=&quot;tab-item&quot;> <router-link to=&quot;/seller&quot;>商家</router-link> </div> </p></div> <p> <router-view></router-view> </div> <p></template></p> <p><script> import vHeader from &quot;@/components/header/vHeader.vue&quot;;</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { components: { vHeader } }; </script></p> <style lang=&quot;stylus&quot;> .tab display: flex width: 100% height: 40px line-height: 40px</p> <p> .tab-item flex: 1 text-align: center &amp; > a display:block font-size: 14px color: rgb(77, 85, 93) &amp;.active color: rgb(240, 20, 20)</p> </style> <p>" 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>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">v-header</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/goods"</span>&gt;</span>商品<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/ratings"</span>&gt;</span>评论<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/seller"</span>&gt;</span>商家<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</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">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</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> vHeader <span class="hljs-keyword">from</span> <span class="hljs-string">"@/components/header/vHeader.vue"</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">components</span>: { vHeader } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"stylus"</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.tab</span> <span class="hljs-selector-tag">display</span>: <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/flex" title="浏览关于“flex”的文章" target="_blank" class="tag_link">flex</a></span> <span class="hljs-selector-tag">width</span>: 100% <span class="hljs-selector-tag">height</span>: 40<span class="hljs-selector-tag">px</span> <span class="hljs-selector-tag">line-height</span>: 40<span class="hljs-selector-tag">px</span> <span class="hljs-selector-class">.tab-item</span> <span class="hljs-selector-tag">flex</span>: 1 <span class="hljs-selector-tag">text-align</span>: <span class="hljs-selector-tag">center</span> &amp; &gt; <span class="hljs-selector-tag">a</span> <span class="hljs-selector-tag">display</span><span class="hljs-selector-pseudo">:block</span> <span class="hljs-selector-tag">font-size</span>: 14<span class="hljs-selector-tag">px</span> <span class="hljs-selector-tag">color</span>: <span class="hljs-selector-tag">rgb</span>(77, 85, 93) &amp;<span class="hljs-selector-class">.active</span> <span class="hljs-selector-tag">color</span>: <span class="hljs-selector-tag">rgb</span>(240, 20, 20) </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>其中需在<code>router.js</code>中加入类似:</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="let router =new Router({ linkActiveClass: 'active' });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> router =<span class="hljs-keyword">new</span> Router({ linkActive<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>: <span class="hljs-string">'active'</span> });</code></pre> <p>麻烦看过觉得Ok的给个赞或者收藏,sf老是报我文章不通过审核烦死了都不想写了</p> <p></code></p>

总结

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

慕课网vue教程“饿了么” ,在vue2.5vue-cli3 怎么写

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

慕课网vue教程“饿了么” ,在vue2.5vue-cli3 怎么写

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

80%的人都看过