<p><strong>欢迎大家前往<a href="https://cloud.tencent.com/developer/?fromSource=waitui" rel="nofollow noreferrer" target="_blank">腾讯云+社区</a>,获取更多腾讯海量技术实践干货哦~</strong></p> <blockquote><p>本文由<a href="https://cloud.tencent.com/developer/user/531268?fromSource=waitui" rel="nofollow noreferrer" target="_blank">蔡述雄</a>发表于<a href="https://cloud.tencent.com/developer/column/1930?fromSource=waitui" rel="nofollow noreferrer" target="_blank">云+社区专栏</a></p> <p>蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师。智图图片优化系统首席工程师,曾参与《众妙之门》书籍的翻译工作。目前专注前端图片优化与新技术的探研。</p> </blockquote> <p>2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:<strong><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>、<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>、<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></strong>。没错,什么<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>,seaJs,gulp等都逐渐脱离了热点。面试的时候不吹上一点新技术,好像自己就不是搞前端的似的。当然,希望大家都是抱着好学的心来开始一门学艺的,不管怎样,求求你,请接着看下去吧~</p> <p>本系列文将会通过很多一目了然的例子和一个实战项目——组件库,来帮助大家学习<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>,一步一步来,毕竟这篇文章还有接下来的<a href="https://cloud.tencent.com/developer/article/1020338?fromSource=waitui" rel="nofollow noreferrer" target="_blank">【升学篇】</a>和<a href="https://cloud.tencent.com/developer/article/1020416?fromSource=waitui" rel="nofollow noreferrer" target="_blank">【结业篇】</a>呢。</p> <h2 id="articleHeader0">什么是<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js</h2> <p>不管你想不想了解,你只需要大概知道,Vue就是和<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>一样是一个前端框架,它的中心思想就是数据驱动,像远古时代的老前辈<a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>是结构驱动,什么意思呢,以前我们写代码时常用<strong>$('.dom').text('我把值改变了')</strong>,这种写法先要获得结构,然后再修改数据更新结构,而Vue的做法直接就是<strong><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.msg="我改变了"</strong>,然后msg就会同步到某个结构上,视图管理抽象为数据管理,而不是管理dom结构了。不懂没关系,慢慢来。</p> <p>还有一点必须要知道的是,<strong>Vue是国人写的,技术文档也妥妥的是中文</strong>,想到这我就有学习的动力。</p> <h2 id="articleHeader1">搭建环境</h2> <p>工欲善其事必先利其器,我们的学习计划从学会搭建Vue所需要的环境开始,<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>和npm的环境不用说是必须的,现在前端流程化很热门,基本上新的技术都会在这套流程的基础上做开发,我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>和npm了,那我们就只需要执行以下命令:</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 -g vue-cli" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;">$ npm install -g vue-cli</code></pre> <p>构建完了之后,随便进入一个我们事先准备好的目录,比如demo目录,然后在目录中做初始化操作:</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="$ vue init webpack myProject" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;">$ vue init webpack myProject</code></pre> <p>webpack参数是指myProject这个项目将会在开发和完成阶段帮你自动打包代码,比如将js文件统一合成一个文件,将<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>文件统一合并压缩等。要是不知道webpack的话,建议先了解下为好,当然不了解也不影响我们接着往下走。</p> <p>init的过程中会问你给项目定义一些描述,版本之类的信息,可以不管,一直输入y确定跳过,完成之后出现以下界面,红框部分会提示你接下来要做的操作,按照它的提示继续敲代码就对了。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009011342?w=666&amp;h=568" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></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="cd myProject npm install npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">cd myProject npm install npm run dev</code></pre> <p>npm install 是安装项目所需要的依赖,简单理解就是安装一些必要的插件,需要等一段时间;</p> <p>npm run dev 是开始执行我们的项目了,一旦执行这个命令之后,等一小会,浏览器应该会自动帮你打开一个tab为<code>http://localhost:8080/#/</code>的链接,这个链接就是我们本地开发的项目主页了,如果没有,说明出错了。请移步到评论区回复吧。。。</p> <p>(PS:开发完成后执行npm run build会编译我们的源代码生成最终的发布代码,在dist目录下)</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009011343?w=576&amp;h=516" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>看看Vue都给我们生成一些什么文件,这其中我们需要关注的是以下文件</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009011344?w=275&amp;h=334" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>package.json保存一些依赖信息,config保存一些项目初始化配置,build里面保存一些webpack的初始化配置,index.html是我们的首页,除了这些,最关键的代码都在src目录中,index在很多服务器语言中都是预设为首页,像index.htm,index.php等;打开build目录中的<code>webpack.base.conf.js</code>,会看到这样的代码</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009011345?w=331&amp;h=123" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>说明我们的入口js文件在src目录中的main.js,接下来我们就分析下这些初始化代码先;</p> <h2 id="articleHeader2">跟着代码走</h2> <p>Vue的核心架构,按照官方解释和个人理解,主要在于组件和路由两大模块,只要理解了这两大模块的思想内容,剩下<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>使用就只是分分钟的事情了。所以在我的系列文中,会围绕组件和路由教大家开发一个前端组件库,这个过程也是我个人学习的练手项目,个人觉得一步步做下来之后,对Vue的理解就可以算是出师了,胜过读10遍书籍文档,那是后话了,先让我们看看最基本的Vue生成的默认代码吧!</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 Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App></span>',<br /> components: { App }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// The Vue build version to load with the `import` command</span> <span class="hljs-comment">// (runtime-only or standalone) has been set in webpack.base.conf with an alias.</span> <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> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, router, <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, <span class="hljs-attr">components</span>: { App } })</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="import Vue from 'vue'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span></code></pre> <p>这句很好理解,就像你要引入jQuery一样,vue就是<code>jquery-min.js</code>,然后Vue就是$;然后又引入了<code>./App</code>文件,也就是目录中和<code>main.js</code>同级的<code>App.vue</code>文件;在Vue中引入文件可以直接用import,文件后缀名可以是<code>.vue</code>,这是Vue自己的文件类型,之前说的webpack会将js和css文件打包,同样的道理,在webpack中配置vue插件后(项目默认配置),webpack就可以将.vue类型的文件整合打包,这和nodeJs中require差不多的道理。</p> <p>说回App.vue这个文件,这是一个视图(或者说组件和页面),想象一下我们的index.html中什么也没有,只有一个视图,这个视图相当于一个容器,然后我们往这个容器中放各种各样的积木(其他组件或者其他页面),App.vue中的内容我们后面说;</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 router from './router'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span></code></pre> <p>这句代码引入一段路由配置,同样的后边说(很快就说到的不用急)</p> <p>接下来的 new Vue实例化,其实就相当于平时我们写js时候常用的init啦,然后声明el:<code>'#app'</code>,意思是将所有视图放在id值为app这个dom元素中,components表明引入的文件,即上述的<code>App.vue</code>文件,这个文件的内容将以<code>&lt;App/&gt;</code>这样的标签写进去<code>#app</code>中,总的来说,这段代码意思就是将<code>App.vue</code>放到<code>#app</code>中,然后以<code>&lt;App/&gt;</code>来指代我们的<code>#app</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="import Vue from 'vue' import App from './App'/*引入App这个组件*/ import router from './router'/*引入路由配置*/ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app',/*最后效果将会替换页面中id为app的<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>元素*/<br /> router,/*使用路由*/<br /> template: '<App></span>',/*告知页面这个组件用这样的标签来包裹着,并且使用它*/<br /> components: { App }/*告知当前页面想使用App这个组件*/<br /> })" 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> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span><span class="hljs-comment">/*引入App这个组件*/</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span><span class="hljs-comment">/*引入路由配置*/</span> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,<span class="hljs-comment">/*最后效果将会替换页面中id为app的<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>元素*/</span> router,<span class="hljs-comment">/*使用路由*/</span> template: <span class="hljs-string">'&lt;App/&gt;'</span>,<span class="hljs-comment">/*告知页面这个组件用这样的标签来包裹着,并且使用它*/</span> components: { App }<span class="hljs-comment">/*告知当前页面想使用App这个组件*/</span> })</code></pre> <h2 id="articleHeader3">单页面组件</h2> <p>好了,现在打开我们的App.vue文件,在Vue中,官网叫它做组件,单页面的意思是结构,样式,逻辑代码都写在同一个文件中,当我们引入这个文件后,就相当于引入对应的结构、样式和JS代码,这不就是我们做前端组件化最想看到的吗,从前的asp、php也有这样的文件思想。</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 id=&quot;app&quot;> <img src=&quot;./assets/logo.png&quot;><br /> <router-view></router-view> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app' } </script></p> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./assets/logo.png"</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"><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-attr">name</span>: <span class="hljs-string">'app'</span> } </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>&gt;</span><span class="css"> <span class="hljs-selector-id">#app</span> { <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Avenir'</span>, Helvetica, Arial, sans-serif; <span class="hljs-attribute">-webkit-font-smoothing</span>: antialiased; <span class="hljs-attribute">-moz-osx-font-smoothing</span>: grayscale; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">color</span>: <span class="hljs-number">#2c3e50</span>; <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">60px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span></code></pre> <p>node端之所以能识别<code>.vue</code>文件,是因为前面说的webpack在编译时将<code>.vue</code>文件中的html,js,css都抽出来合成新的单独的文件。</p> <p>单页面组件会在后面的实战中完整体现,这里先不做过多描述;</p> <p>看到我们文件内分为三大部分,分别是<code>&lt;template&gt;&lt;script&gt;&lt;style&gt;</code>,很好理解结构,脚本,样式;script就像node一样暴露一些接口,可以看到我们的template标签中除了一张图片之外就只有一行代码:<code>&lt;router-view&gt;&lt;/router-view&gt;</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 id=&quot;app&quot;> <img src=&quot;./assets/logo.png&quot;><br /> <router-view></router-view> </div> <p></template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./assets/logo.png"</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></code></pre> <p>回看我们的浏览器页面中,图片是有了,可下面的文本和链接的代码写在哪里了呢?这里就要开始涉及路由了。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009011346?w=325&amp;h=289" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <h2 id="articleHeader4">路由</h2> <p>这里补充下路由的大致概念:传统的php路由是由服务器端根据一定的url规则匹配来返回给前端不同的页面代码,如以下地址</p> <p><a href="https://isux.tencent.com/about" rel="nofollow noreferrer" target="_blank">https://isux.tencent.com/abou...</a></p> <p>注意这里只有about和recruit,这些不带<code>xxx.html</code>的地址其实是服务器端经过一层封装指定到某些文件上去。同样的道理,前端也可以根据带锚点的方式实现简单路由(不需要刷新页面)</p> <p><a href="https://zhitu.isux.us/index.php/preview/install#mac" rel="nofollow noreferrer" target="_blank">https://zhitu.isux.us/index.p...</a></p> <p>其中#mac就是我们的锚点路由,注意开始我们在浏览器中打开的地址:</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="http://localhost:8080/#/," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">http:</span><span class="hljs-comment">//localhost:8080/#/,</span></code></pre> <p>路由让我们可以访问诸如<code>http://localhost:8080/#/about/</code> 或者 <code>http://localhost:8080/#/recruit</code>这些页面的时候不带刷新,直接展示。现在回到我们刚才打开的<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="<router-view></router-view>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><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></code></pre> <p>这句代码在页面中放入一个路由视图容器,当我们访问<code>http://localhost:8080/#/about/</code>的时候会将about的内容放进去,访问<code>http://localhost:8080/#/recruit</code>的时候会将recruit的内容放进去</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009011347?w=373&amp;h=346" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>如此看来,无论我们打开<code>http://localhost:8080/#/about/</code> 还是<code>http://localhost:8080/#/recruit</code>页面中的图片都是公用部分,变得只是路由器里面的内容,那么路由器的内容谁来控制呢?</p> <p>前面说的<code>src/main.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="import router from './router'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span></code></pre> <p>现在就让我们打开router目录下的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 Hello from '@/components/Hello' import About from '@/components/about' import Recruit from '@/components/recruit' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello }, { path: '/about', name: 'about', component: About }, { path: '/recruit', name: 'recruit', component: Recruit } ] })" 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> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> Hello <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/Hello'</span> <span class="hljs-keyword">import</span> About <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/about'</span> <span class="hljs-keyword">import</span> Recruit <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/recruit'</span> Vue.use(Router) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ <span class="hljs-attr">routes</span>: [ { <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'Hello'</span>, <span class="hljs-attr">component</span>: Hello }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/about'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'about'</span>, <span class="hljs-attr">component</span>: About }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/recruit'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'recruit'</span>, <span class="hljs-attr">component</span>: Recruit } ] })</code></pre> <p>前面先引入了路由插件<code>vue-router</code>,然后显式声明要用路由 <code>Vue.use(Router)</code> 。注意到Hello,About等都是页面(也可以是组件),接着注册路由器,然后开始配置路由。</p> <p>路由的配置应该一目了然,给不同的path分配不同的页面(或组件,页面和组件其实是一样的概念),name参数不重要只是用来做识别用的。看到这里就可以明白,前面说的红色框的内容,其实就是Hello里面的内容,打开components目录下的Hello.vue就能明白了。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009011346?w=325&amp;h=289" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>到这里就可以完成路由的配置,我个人习惯喜欢把页面放在pages目录下,组件放在components目录下,可能有人会问如果要访问<code>http://localhost:8080/#/about/me</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="{ path: '/blog', name: 'blog', component: Blog, children: [ { path: '/', component: page1 }, { path: 'info', component: page2 } ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">{ <span class="hljs-attr">path</span>: <span class="hljs-string">'/blog'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'blog'</span>, <span class="hljs-attr">component</span>: Blog, <span class="hljs-attr">children</span>: [ { <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>, <span class="hljs-attr">component</span>: page1 }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'info'</span>, <span class="hljs-attr">component</span>: page2 } ] }</code></pre> <p>访问/blog的时候会访问Blog页面,Blog里面放个路由器就可以了,然后访问<code>http://localhost:8080/#/blog/</code>的时候会往路由容器中放置page1的内容,访问<code>http://localhost:8080/#/blog/info</code>的时候会往路由容器中放置page2的内容</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="//blog.vue <template></p> <div>公用部分</div> <p> <router-view></router-view><br /> </template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">//blog.vue</span> &lt;template&gt; <span class="xml"><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> &lt;router-view&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span></code></pre> <h2 id="articleHeader5">小结</h2> <p>贯穿我们刚才学习的过程,从初始化到页面展示,Vue的页面架构流程大概是这样的</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009011348?w=632&amp;h=609" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>总结下前面讲的内容先:</p> <ol> <li>搭建环境</li> <li>代码逻辑</li> <li>单页面组件(简单带过)</li> <li>路由</li> <li>子路由</li> </ol> <p>以上的流程就是我们刚开始接触Vue时候的简单介绍,在之前就说过学习Vue能掌握组件和路由的基本概念之后,对于我们后续了解他的工作机制有着很大的帮助,<strong>本篇章我们只是简单介绍了单页面组件,在下一篇文章中,我们将通过一个实战的项目,来充分了解组件化在Vue构建中的重要性。</strong></p> <p>时间不早了,我也该回去睡觉了,消化一下,我们下一篇文章见~~~</p> <p>文末附上所有相关代码和官方文档地址~~~</p> <p><a href="http://cn.vuejs.org/v2/guide/" rel="nofollow noreferrer" target="_blank">http://cn.vuejs.org/v2/guide/</a></p> <p>附件:<br /><a href="https://ask.qcloudimg.com/raw/yehe-133f028/qiwgf9qoup.zip" rel="nofollow noreferrer" target="_blank">src.zip</a></p> <blockquote><p> <strong>问答</strong><br /><a href="https://cloud.tencent.com/developer/ask/25452?fromSource=waitui" rel="nofollow noreferrer" target="_blank">vue.js 怎么使用插件?</a><br /><strong>相关阅读</strong><br /><a href="https://cloud.tencent.com/developer/article/1004984?fromSource=waitui" rel="nofollow noreferrer" target="_blank">Vue.js 实战总结</a><br /><a href="https://cloud.tencent.com/developer/article/1075542?fromSource=waitui" rel="nofollow noreferrer" target="_blank">Angular和Vue.js 深度对比</a><br /><a href="https://cloud.tencent.com/developer/article/1083085?fromSource=waitui" rel="nofollow noreferrer" target="_blank">0基础菜鸟学前端之Vue.js</a> <br /><a href="https://cloud.tencent.com/developer/edu/course-1128?fromSource=waitui" rel="nofollow noreferrer" target="_blank">【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识</a> </p></blockquote> <p><strong>此文已由作者授权腾讯云+社区发布,更多原文请<a href="https://cloud.tencent.com/developer/article/1020337?fromSource=waitui" rel="nofollow noreferrer" target="_blank">点击</a></strong></p> <p><strong>搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!</strong></p> <p>海量技术实践经验,尽在<a href="https://cloud.tencent.com/developer?fromSource=waitui" rel="nofollow noreferrer" target="_blank">云加社区</a>!</p>

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