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

Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<h2 id="articleHeader0">制作.vue模板文件</h2> <p>通过前面的两篇博文的学习,我们已经建立好了一个项目。问题是,我们还没有开始制作页面。下面,我们要来做页面了。</p> <p>我们还是利用 <a href="http://cnodejs.org/api" rel="nofollow noreferrer" target="_blank">http://cnodejs.org/api</a> 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面。列表页面有分页等,内容页面展示。</p> <p>因此,我们需要两个模板文件。</p> <p>我们在src/page目录下面新建两个文件,分别是index.vue和content.vue</p> <p>index.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="<template></p> <div>这是首页</div> <p></template><br /> " 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">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> </code></pre> <p>content.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="<template></p> <div>这是内容页</div> <p></template><br /> " 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">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">template</span>&gt;</span> </code></pre> <h2 id="articleHeader1">配置路由routes.js</h2> <p>在src目录下的config文件夹下新增routes.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 '../page/index.vue' import content from '../page/content.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: index }, { path: '/content', component: content } ] })" 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-comment">// 引用模板</span> <span class="hljs-keyword">import</span> index <span class="hljs-keyword">from</span> <span class="hljs-string">'../page/index.vue'</span> <span class="hljs-keyword">import</span> content <span class="hljs-keyword">from</span> <span class="hljs-string">'../page/content.vue'</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>, component: index }, { path: <span class="hljs-string">'/content'</span>, component: content } ] })</code></pre> <h2 id="articleHeader2">配置main.js</h2> <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 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> from 'vue'<br /> import App from './App'<br /> import router from './router/routes.js'</p> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.config.productionTip = false</p> <p>new Vue({<br /> el: '#app',<br /> router,<br /> template: '<App></span>',<br /> components: { App }<br /> })" 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">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/routes.js'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, template: <span class="hljs-string">'&lt;App/&gt;'</span>, components: { App } })</code></pre> <h2 id="articleHeader3">配置App.vue</h2> <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;> <div class=&quot;nav-list&quot;> <router-link class=&quot;nav-item&quot; to=&quot;/&quot;>首页</router-link><br /> <router-link class=&quot;nav-item&quot; to=&quot;/content&quot;>内容页</router-link> </div> <p> <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="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">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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-list"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/"</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">router-link</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/content"</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">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">export</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></code></pre> <h2 id="articleHeader4">关闭格式检查插件eslint</h2> <p>当我们<code>npm run dev</code>的时候页面运行后出现如图所示:<br /><span class="img-wrap"><img data-src="/img/bVRYFn?w=313&amp;h=84" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>然后去查看错误发现大部分是语法问题引起的,所以打开根目录下面的/build/webpack.base.conf.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="{ test: /.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>{ <span class="hljs-attribute">test</span>: /.(js|vue)$/, loader: <span class="hljs-string">'eslint-loader'</span>, enforce: <span class="hljs-string">'pre'</span>, include: [<span class="hljs-built_in">resolve</span>(<span class="hljs-string">'src'</span>), <span class="hljs-built_in">resolve</span>(<span class="hljs-string">'test'</span>)], options: { formatter: <span class="hljs-built_in">require</span>(<span class="hljs-string">'eslint-friendly-formatter'</span>) } }</code></pre> <p>再次运行npm run dev 就会在浏览器出现如图所示的界面:<br /><span class="img-wrap"><img data-src="/img/bVRYGP?w=1056&amp;h=225" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>点击内容直接进入内容页界面。<br />到这儿页面就运行起来了,也就可以其它的开发了。</p> <h2 id="articleHeader5">扩展:使用sass写样式</h2> <p>如果我们在App.vue中导入了sass,如:<br />那么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="<template></p> <div id=&quot;app&quot;> <div class=&quot;nav-list&quot;> <router-link class=&quot;nav-item&quot; to=&quot;/&quot;>首页</router-link><br /> <router-link class=&quot;nav-item&quot; to=&quot;/content&quot;>内容页</router-link> </div> <p> <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 lang=&quot;scss&quot;> @import &quot;./style/style&quot;; </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">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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-list"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/"</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">router-link</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/content"</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">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">export</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> <span class="hljs-attr">lang</span>=<span class="hljs-string">"scss"</span>&gt;</span><span class="css"> @<span class="hljs-keyword">import</span> <span class="hljs-string">"./style/style"</span>; </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>这样以来页面就会报错,因为没有安装sass-loader,如下错误:</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="ERROR in ./src/App.vue Module not found: Error: Can't resolve 'sass-loader' in 'D:vue_test_projectvuedemosrc' @ ./src/App.vue 4:2-324 @ ./src/main.js @ multi ./build/dev-client ./src/main.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs rust"><code>ERROR <span class="hljs-keyword">in</span> ./src/App.vue Module not found: Error: Can<span class="hljs-symbol">'t</span> resolve <span class="hljs-symbol">'sass</span>-loader' <span class="hljs-keyword">in</span> <span class="hljs-symbol">'D</span>:vue_test_projectvuedemosrc' @ ./src/App.vue <span class="hljs-number">4</span>:<span class="hljs-number">2</span>-<span class="hljs-number">324</span> @ ./src/main.js @ multi ./build/dev-client ./src/main.js</code></pre> <p>需要安装安装sass-loader以及node-sass插件才能正常运行。依次执行下面的指令:</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 sass-loader -D npm install node-sass -D" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> sass-loader -D npm <span class="hljs-keyword">install</span> node-sass -D</code></pre> <p>这样页面就顺利运行起来了。<br />结果如图所示:<br /><span class="img-wrap"><img data-src="/img/bVRZiB?w=359&amp;h=110" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader6">参考</h2> <p><a href="https://segmentfault.com/a/1190000008557578">Vue2+VueRouter2+webpack+vue-cil构建完整项目实例(附:详细步骤截图)</a><br /><a href="http://blog.csdn.net/FungLeo/article/details/53199436" rel="nofollow noreferrer" target="_blank">Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先</a></p>

总结

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

Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

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

Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

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

80%的人都看过