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

一个小项目,带你深入Vue单页面应用开发

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>本人长期混迹于币圈,无奈最近数字货币全线下跌,就此收手作罢。朋友推荐了币乎,说这是一个神奇的网站,看了一眼,发现用户数众多,算是一个比较大而垂直的社区了,至于是不是区块链行业的专业网站,我不做评论。作为一名资深的前端开发狗,就本能地右键-&gt;查看源代码,发现这是一个用react写成的网站。抱着试一试的心态,调用了一下api,发现竟然做了跨域处理,第三方可以无痛调用(不需要token、签名验证什么的)。程序员都有重新造轮子的职业病(臭毛病),就打算把网站用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>重新构建,给想学习vue开发的同学做个教程。</p> <p>废话不多说,先放线上预览地址:<a href="https://liuxuanqiang.github.io/vue-bihu" rel="nofollow noreferrer" target="_blank">https://liuxuanqiang.github.i...</a></p> <p>由于是托管在github上的,第一次访问可能比较慢,请耐心等待。。。</p> <p>再放几张截图:<br /><span class="img-wrap"><img data-src="/img/bVbfnTH?w=1344&amp;h=638" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbfnTQ?w=1345&amp;h=641" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>当然了,作为一个现代的互联网项目,是完全适配移动端的:</p> <p><span class="img-wrap"><img data-src="/img/bVbfnT6?w=1536&amp;h=2274" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbfnUh?w=1536&amp;h=2273" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>展示到此为止,下面说说代码。</p> <p>1.请先从GitHub上clone源代码:<a href="https://github.com/liuxuanqiang/vue-bihu" rel="nofollow noreferrer" target="_blank">https://github.com/liuxuanqia...</a></p> <p>2.安装依赖:npm install,下载太慢的话请使用cnpm,没用过请查看教程:<a href="http://npm.taobao.org/" rel="nofollow noreferrer" target="_blank">http://npm.taobao.org/</a></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: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><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>3.安装完成后,启动项目:npm run dev,该命令会启动一个本地服务器,<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/</p> <p>4.打包项目:npm run build,会在项目根目录下生成dist文件夹,目录下是打包好的入口html文件及其相关资源文件,可将其部署至web服务器。</p> <p>是的,看到这里你也看出来了,这是一个基于vue-cli脚手架的项目,不得不说vue很好地规范了其开发生态,开发者只需要关注业务代码本身,而不必操心复杂的webpack配置,可以说是对开发人员尤其是新手是相当友好的。</p> <p>以上是项目概览,下面挑几个点详细说说。</p> <p>1.路由配置(src/router/index.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 Router from 'vue-router' import Index from '@/pages/index' import Article from '@/pages/article' import User from '@/pages/user' Vue.use(Router) export default new Router({ routes: [{ path: '/', name: 'index', component: Index }, { path: '/article/:id', name: 'article', component: Article }, { path: '/user/:userId', name: 'user', component: User }] }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> Index <span class="hljs-keyword">from</span> <span class="hljs-string">'@/pages/index'</span> <span class="hljs-keyword">import</span> Article <span class="hljs-keyword">from</span> <span class="hljs-string">'@/pages/article'</span> <span class="hljs-keyword">import</span> User <span class="hljs-keyword">from</span> <span class="hljs-string">'@/pages/user'</span> Vue.use(Router) <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">default</span> <span class="hljs-keyword">new</span> Router({ routes: [{ path: <span class="hljs-string">'/'</span>, name: <span class="hljs-string">'index'</span>, component: Index }, { path: <span class="hljs-string">'/article/:id'</span>, name: <span class="hljs-string">'article'</span>, component: Article }, { path: <span class="hljs-string">'/user/:userId'</span>, name: <span class="hljs-string">'user'</span>, component: User }] }) </code></pre> <p>2.引入http请求库—ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>(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="// The <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> build version to load with the `import` command<br /> // (runtime-only or standalone) has been set in webpack.base.conf with an alias.<br /> import Vue from 'vue'<br /> import App from './App'<br /> import router from './router'<br /> import ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a> from 'axios'<br /> import utils from './utils/index.js'</p> <p>Vue.config.productionTip = false</p> <p>Vue.prototype.$axios = axios<br /> Vue.prototype.$utils = utils</p> <p>/* eslint-disable no-new */<br /> new Vue({<br /> el: '#app',<br /> router,<br /> components: { App },<br /> template: '<App></span>'<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>// The Vue build version to <span class="hljs-keyword">load</span> <span class="hljs-keyword">with</span> the <span class="hljs-string">`import`</span> command // (runtime-<span class="hljs-keyword">only</span> <span class="hljs-keyword">or</span> <span class="hljs-keyword">standalone</span>) has been <span class="hljs-keyword">set</span> <span class="hljs-keyword">in</span> webpack.base.conf <span class="hljs-keyword">with</span> an alias. <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> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> <span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span> <span class="hljs-keyword">import</span> utils <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/index.js'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> Vue.prototype.$axios = axios Vue.prototype.$utils = utils <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, components: { App }, <span class="hljs-keyword">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span> })</code></pre> <p>注意这句:Vue.prototype.$axios = axios,这么写的目的是将axios挂载为vue的一个全局方法,在代码中可以这样用了:<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$axios.post(),<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$axios.get() ...</p> <p>基本就是这样,由于没有登录及注册接口,登录、注册、关注等这些功能暂且未开发,我也在寻求其他办法,本项目也会持续更新,若对你有所帮助,请star,欢迎issues。</p> <p>源码地址:<a href="https://github.com/liuxuanqiang/vue-bihu" rel="nofollow noreferrer" target="_blank">https://github.com/liuxuanqia...</a></p> <p></code></p>

总结

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

一个小项目,带你深入Vue单页面应用开发

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

一个小项目,带你深入Vue单页面应用开发

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

80%的人都看过