<p><code></p> <p>构建一个 <code>vue</code> 项目最简单的方式就是使用脚手架工具 <code>vue-cli</code> 。前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 <code>webpack</code> 配置文件的基本内容,大大降低了初学者构建项目的难度。这节我们看看如何使用 <code>vue-cli</code> 构建 <code>vue</code> 项目以及对构建项目的具体分析。</p> <h3 id="articleHeader0">一、环境搭建</h3> <p><code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a></code> 和 <code>npm</code> 是必不可少的,这里不再介绍。</p> <h4>1、安装 vue-cli</h4> <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="shell hljs"><code class="shell" style="word-break: break-word; white-space: initial;"><span class="hljs-meta">$</span><span class="bash"> npm install -g vue-cli</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="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ vue --version 3.3.0" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell"><span class="hljs-meta">$</span><span class="bash"> vue --version</span> 3.3.0</code></pre> <p>&lt;!-- more --&gt;</p> <h4>2、构建项目</h4> <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 hello-vue" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell" style="word-break: break-word; white-space: initial;"><span class="hljs-meta">$</span><span class="bash"> vue init webpack hello-vue</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="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="? Project name hello-vue # 项目名称 ? Project description A <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js project # 项目描述<br /> ? Author Deepspace <cxin1427@gmail.com> # 作者<br /> ? Vue build standalone # 运行+编译时<br /> ? Install vue-router? Yes # 安装 vue-router<br /> ? Use ESLint to lint your code? Yes # 使用 ESLint 作为代码规范<br /> ? Pick an ESLint preset Airbnb # 选择 Airbnb 的代码规范<br /> ? Set up unit tests Yes # 安装单元测试<br /> ? Pick a test runner karma # 测试模块<br /> ? Setup e2e tests with Nightwatch? Yes # 安装 e2e 测试<br /> ? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,npm" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell">? Project name hello-vue # 项目名称 ? Project description A <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js project # 项目描述 ? Author Deepspace &lt;cxin1427@gmail.com&gt; # 作者 ? Vue build standalone # 运行+编译时 ? Install vue-router? Yes # 安装 vue-router ? Use ESLint to lint your code? Yes # 使用 ESLint 作为代码规范 ? Pick an ESLint preset Airbnb # 选择 Airbnb 的代码规范 ? Set up unit tests Yes # 安装单元测试 ? Pick a test runner karma # 测试模块 ? Setup e2e tests with Nightwatch? Yes # 安装 e2e 测试 ? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,npm</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="# Project initialization finished! # ======================== To get started: cd hello-vue npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell"><span class="hljs-meta">#</span><span class="bash"> Project initialization finished!</span> <span class="hljs-meta">#</span><span class="bash"> ========================</span> To get started: cd hello-vue npm run dev Documentation can be found at https://<a href="http://www.js-code.com/tag/vuejs" title="浏览关于“vuejs”的文章" target="_blank" class="tag_link">vuejs</a>-templates.github.io/webpack</code></pre> <h4>3、启动项目</h4> <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 hello-vue $ npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell"><span class="hljs-meta">$</span><span class="bash"> <span class="hljs-built_in">cd</span> hello-vue</span> <span class="hljs-meta">$</span><span class="bash"> npm run dev</span></code></pre> <p>项目默认会在 8080 端口启动,如果端口有占用,会自动调整端口。打开浏览器输入:<code>http://localhost:8080</code>,会看到构建的项目的主页:</p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/1/25/16882dd62568083b?w=1106&amp;h=750&amp;f=png&amp;s=206460" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h4>4、目录结构</h4> <p>使用编辑器打开(推荐使用 <code>VSCode</code>),下面具体看看目录结构:</p> <p><strong><code>package.json</code> :</strong></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="{ &quot;scripts&quot;: { &quot;dev&quot;: &quot;webpack-dev-server --inline --progress --config build/webpack.dev.conf.js&quot;, &quot;start&quot;: &quot;npm run dev&quot;, &quot;unit&quot;: &quot;cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run&quot;, &quot;e2e&quot;: &quot;node test/e2e/runner.js&quot;, &quot;test&quot;: &quot;npm run unit &amp;&amp; npm run e2e&quot;, &quot;lint&quot;: &quot;eslint --ext .js,.vue src test/unit test/e2e/specs&quot;, &quot;build&quot;: &quot;node build/build.js&quot; } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json">{ <span class="hljs-attr">"scripts"</span>: { <span class="hljs-attr">"dev"</span>: <span class="hljs-string">"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"</span>, <span class="hljs-attr">"start"</span>: <span class="hljs-string">"npm run dev"</span>, <span class="hljs-attr">"unit"</span>: <span class="hljs-string">"cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"</span>, <span class="hljs-attr">"e2e"</span>: <span class="hljs-string">"<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a> test/e2e/runner.js"</span>, <span class="hljs-attr">"test"</span>: <span class="hljs-string">"npm run unit &amp;&amp; npm run e2e"</span>, <span class="hljs-attr">"lint"</span>: <span class="hljs-string">"eslint --ext .js,.vue src test/unit test/e2e/specs"</span>, <span class="hljs-attr">"build"</span>: <span class="hljs-string">"node build/build.js"</span> } }</code></pre> <p>在 <code>package.json</code> 中,根据我们在构建项目的时候的选项,有以下几个命令。</p> <ul> <li> <code>npm run dev</code> :项目开发阶段,项目启动的命令;</li> <li> <code>npm run lint</code> :使用 <code>eslint</code> 检查代码格式;</li> <li> <code>npm run test</code>:单元测试和 <code>e2e</code> 测试;</li> <li> <code>npm run e2e</code> : <code>e2e</code> 测试;</li> <li> <code>npm run build</code>:开发完成后执行,会把我们的源代码编译成最终的发布代码,生成在项目根目录中的 <code>dist</code> 文件夹下(初始化项目时不会生成)。</li> </ul> <p><strong><code>config</code>:</strong> 保存一些项目初始化配置。</p> <p><strong><code>build</code> :</strong>里面保存一些 <code>webpack</code> 的初始化配置。</p> <p><strong><code>index.html</code> : </strong>是我们的首页。<code>index</code> 很多时候都被预设为首页,像 <code>index.htm</code>,<code>index.php</code> 等。</p> <p><strong><code>src</code> : </strong> 保存项目源代码的地方,我们下面会详细分析该文件夹里的文件。</p> <h3 id="articleHeader1">二、代码分析</h3> <p><code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></code> 的核心架构分为两个部分:<strong>路由和组件</strong>,其实 <code><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a></code> 也是一样的。我们在切入一个项目的时候,都是从这两个点出发。下面我们具体看看 <code>src</code> 文件夹。</p> <h4>1、入口文件</h4> <p>如果我们打开项目根目录下 <code>build</code> 目录中的 <code>webpack.base.conf.js</code>,会看到这样的代码(第22行):</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 = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, // ... } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><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 = { <span class="hljs-attr">context</span>: path.resolve(__dirname, <span class="hljs-string">'../'</span>), <span class="hljs-attr">entry</span>: { <span class="hljs-attr">app</span>: <span class="hljs-string">'./src/main.js'</span> }, <span class="hljs-comment">// ...</span> } </code></pre> <p>说明我们的入口文件就是 <code>src</code> 目录下的 <code>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="// 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, components: { App }, template: '<App></span>',<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">components</span>: { App }, <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, });</code></pre> <p>看看这里面做了什么事情:</p> <ul> <li>引入 <code>vue</code> 并起名叫作 <code>Vue</code> </li> <li>引入 根目录下的 <code>App.vue</code> 文件(后缀名可不要)</li> <li>引入 <code>router</code> 文件下的 <code>index.js</code> 文件(文件夹后没有具体的文件,默认引入的就是 <code>index.js</code> 文件)</li> <li> <p>通过 <code>new </code> 实例化 <code>Vue</code> 实例 ,实例化的时候声明了几个属性:</p> <ul> <li> <code>el:'#app'</code>:意思是将所有视图放在 <code>id</code> 值为 <code>app</code> 这个 <code>dom</code> 元素中,也就是项目根目录下的 <code>index.html</code> 中的那个 <code><a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a></code> : <code>&lt;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> id="app"&gt;&lt;/<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt;</code>;</li> <li> <code>components: { App }</code>:意思是将上面引入的 <code>App.vue</code> 文件的内容将以 <code>&lt;App/&gt;</code> 这样的标签写进 <code>&lt;div id="app"&gt;&lt;/div&gt;</code> 中;</li> </ul> </li> </ul> <p>在开始的时候,我们并没有介绍说 <strong><code>Vue</code> 使用的是虚拟 <code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code></strong> ,那么,从这里我们看出,<code>Vue</code> 使用的也是虚拟 <code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code> (和<code><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a></code>是一样的)。</p> <blockquote><p>这里对<strong>虚拟 <code><a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a></code></strong> 作下简单介绍:当我们修改应用程序时,不会对 <code> DOM</code> 进行更改,而是创建以 <code>JavaScript</code> 数据结构形式存在的 <code>DOM</code> 副本,然后插到文档当中。无论何时进行任何更改,都将对 <code>JavaScript</code> 数据结构进行更改,并将后者与原始数据结构进行比较(<code>diff</code>算法),然后将最终更改更新为真实 <code>DOM</code>。我们都知道 <code>DOM</code> 是非常重的,所以<strong>虚拟 <code>DOM</code></strong> 是非常省性能的。</p></blockquote> <h4>2、App.vue</h4> <p>通过入口文件中做的事情,我们其实已经知道 <code>App.vue</code> 的作用了:<strong>单页面应用的主组件</strong>。所有页面都是在 <code>App.vue</code> 下通过路由进行切换的。所以,我们可以理解为所有的路由(<code>route</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="<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">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span> &lt;script&gt; <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 class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> &lt;style&gt; #app { font-family: <span class="hljs-string">'Avenir'</span>, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #<span class="hljs-number">2</span>c3e50; margin-top: <span class="hljs-number">60</span>px; } &lt;<span class="hljs-regexp">/style&gt;</span></code></pre> <blockquote><p>这里需要提一下:<code>node</code> 之所以可以识别出 <code>*·vue</code> 格式的文件,是因为 <code>webpack</code> 在编译时将 <code>*.vue</code> 文件中的 <code>html</code> 、<code>js</code> 、<code>css</code> 都抽出来形成新的单独文件。可通过 <code>npm run build</code> 命令编译源代码,查看 <code>dist</code> 文件下的文件来验证。</p></blockquote> <p><code>App.vue</code> 的内容分为三个部分:<code>&lt;template&gt;...&lt;/template&gt;</code>、<code>&lt;script&gt;...&lt;/script&gt;</code>、<code>&lt;style&gt;...&lt;/style&gt;</code> ,分别在这三类标签里面写入<strong>结构、脚本、样式</strong>。</p> <p>我们先从 <code> &lt;template&gt;</code> 看起:里面一个 <code>div</code> 包裹着 <code>img</code> 标签和 <code>router-view</code> 标签。前面提到过: <strong><code>App.vue</code> 是单页面应用的主组件</strong>。对照着前面在浏览器中打开的应用主页面,<code>img</code> 标签就是页面上方的 <code>Vue</code> 的 <code>logo</code>。那下面的内容去哪了呢?和 <code>&lt;router-view/&gt;</code> 有关系吗?这就要去看路由了。</p> <h4>3、router/index.js</h4> <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 HelloWorld from '@/components/HelloWorld'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, }, ], });" 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> HelloWorld <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/HelloWorld'</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">'HelloWorld'</span>, <span class="hljs-attr">component</span>: HelloWorld, }, ], });</code></pre> <p>前面先引入了路由插件 <code>vue-router</code>,然后显式声明要用路由 <code>Vue.use(Router)</code> 。路由的配置非常地明了:给不同 <code>path</code> 分配不同的组件(或者页面),参数 <code>name</code> 只是用来识别。</p> <p>当我访问根路由 <code>http://localhost:8080/#/</code> 时,<code>App.vue</code> 中的 <code>&lt;router-view/&gt;</code> 就会把引入的 <code>HelloWorld</code> 组件分配给我,放在了 <code>img</code> 标签的下面,打开 <code>components</code> 目录下的 <code>HelloWorld.vue</code> 就可以看到具体内容了。</p> <blockquote><p>我们在看到浏览器中的 <code>url</code> 的时候会觉得奇怪,为什么在后面加了一个 <code>#</code> 号呢?这是因为 <code>vue-router</code> 默认 <code>hash</code> 模式 —— 使用 <code>URL</code> 的 <code>hash</code> 来模拟一个完整的 <code>URL</code>,当 URL 改变时,页面不会重新加载。详见:<a href="https://router.vuejs.org/zh/guide/essentials/history-mode.html" rel="nofollow noreferrer" target="_blank">https://router.vuejs.org/zh/g...</a> 。这里可先跳过这点内容。</p></blockquote> <p>现在,我们在浏览器访问 <code>http://localhost:8080/#/vue</code> 这个地址,会发现只出现了 <code>Vue</code> 的 <code>logo</code>。这是因为我们并没有配置 <code>/vue</code> 这个路由,找不到路由,那<code>&lt;router-view/&gt;</code> 这个标签就不会加载出来。</p> <p>到这里,我们就知道路由是如何根据 <code>url</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="export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/about', name: 'about', component: About }, { path: '/vue', name: 'vue', component: Vue } ] })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><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">'HelloWorld'</span>, <span class="hljs-attr">component</span>: HelloWorld }, { <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">'/vue'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'vue'</span>, <span class="hljs-attr">component</span>: Vue } ] })</code></pre> <p>那如果要访问 <code>http://localhost:8080/#/vue/demo</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="export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, }, { path: '/about', name: 'about', component: About, }, { path: '/vue', name: 'vue', component: Vue, children: [ { path: '/demo', component: demo, }, { path: '/project', component: project, }, ], }, ], });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><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">'HelloWorld'</span>, <span class="hljs-attr">component</span>: HelloWorld, }, { <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">'/vue'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'vue'</span>, <span class="hljs-attr">component</span>: Vue, <span class="hljs-attr">children</span>: [ { <span class="hljs-attr">path</span>: <span class="hljs-string">'/demo'</span>, <span class="hljs-attr">component</span>: demo, }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/project'</span>, <span class="hljs-attr">component</span>: project, }, ], }, ], });</code></pre> <p>给路由加多一个子路由配置即可。</p> <h4>4、assets</h4> <p>用来存放一些图片、样式等静态文件。</p> <h3 id="articleHeader2">三、总结</h3> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/1/25/16882ddd1666f818?w=1298&amp;h=1014&amp;f=png&amp;s=238345" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="总结" title="总结" style="cursor: pointer;"></span></p> <blockquote><p>欢迎关注我的博客:<a href="https://togoblog.cn/" rel="nofollow noreferrer" target="_blank">https://togoblog.cn/</a> </p></blockquote> <p></code></p>

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