

今天,我们将学习如何使用 Vue 构建单页应用程序。
Vue.js 是一个构建交互式Web界面的库。 它为 数据反应式(data-reactive) 组件提供了一个简单而灵活的API。
为了本教程的目的,术语 Vue 指的是 Vue 2.X 版本,除非另有说明。
我们将构建什么
让我们快速了解一下我们正在构建的内容,如图:
完整的示例代码:https://github.com/samuelayo/vue-spapt1
通过本教程希望你已经掌握:
- Vue 的基础知识。
- 如何创建 Vue 组件。
开始使用 Vue CLI
为了方便起见,并跳过将 ES6 编译为 ES5 的 webpack 的配置过程,我们会使用 vue cli
。如果您没有安装 Vue cli,我们可以通过执行以下操作进行安装。
sudo npm install -g vue-cli
安装 vue-cli 之后,是时候创建一个 vue 项目了。 为此,我们运行以下命令。
注意:为了本教程的目的,在运行下面的命令时,当问我代码是否 linting 时,我选择了否。
代码 linting 将确保代码的正确缩进,以及空格也不会被保留。但是我喜欢在我的代码中保留空格,以保持代码的美观。
vue init webpack spa
在上面的命令中,我们会注意到两个陌生的单词 webpack
和 spa
。
这个命令中的 webpack 指的是我们想要使用的项目脚手架的模板名称,它是 vue-cli 用来帮我们构建项目模板的。还有不同的模板可以使用,有关这方面的更多信息,你可以访问 这里 。
此命令中的 spa 指的是创建应用程序的目录名称。运行上述代码后,我们需要进入该应用程序目录,并安装模块:
// 进入创建应用程序的目录 cd spa // 安装所需的 npm 模块 npm install // 运行开发服务 npm run dev
运行上面的这些命令后,打开 http://localhost:8080 ,我们应该可以看到:
安装和配置 Vue router
现在我们设置并准备开始我们的单页应用程序。但是,我们还需要安装一个依赖,名为 vue-router
。
vue-router
是 Vue 官方提供的 router(路由) 。它与 Vue.js core(核心) 深度整合,使 Vue.js 构建单页应用变得轻而易举。功能包括:
- 嵌套路由 / 视图映射
- 模块化,基于组件的路由配置
- 路由参数,查询,通配符
- Vue.js transition(过渡) 系统提供的视图过渡效果
- 精细的导航控制
- 与自动的激活 CSS 类链接
- HTML5 history(历史记录)模式 或 哈希模式,在 IE9 中自动回退
- 可定制的 Scroll(滚动) 行为
如果你以前使用过 angular
,或者你有任何 angular
知识,那么你会发现 vue-router
类似于 angular router
,或者如果你有任何 react
知识,它和 react-router
也很类似。
我们使用 vue-router 的主要原因是它允许我们在 页面/路由 之间进行切换,而不会 刷新/重新 加载页面。
尽管如此,我们来看看如何安装它。
我们可以通过运行以下命令来安装它。
npm install vue-router --save
现在让我们进入 src/main.js
来配置应用程序,以使用 router(路由) 。
复制以下代码,并替换为 src/main.js
内容:
// 通过 `import` 命令加载 Vue 构建版本(runtime-only 或 standalone), // 该构建版本已在webpack.base.conf中设置了别名。 // 导入 vue 实例 import Vue from 'vue' // 导入 App 组件 import App from './App' // 导入 vue router(路由) import VueRouter from 'vue-router' // 告诉 vue 使用这个 router(路由) Vue.use(VueRouter) // 定义你的 router(路由) const routes = [] // 创建 router 实例并传递 `routes` 选项 // 您可以在这里传递其他选项, // 但现在让我们保持简单。 const router = new VueRouter({ routes, // `routes: routes` 的简写 mode: 'history' }) //实例化 vue 实例 new Vue({ // 定义根组件的选择器 el: '#app', // 根组件的 template template: '<app></app>', // 声明根组件可以访问的组件 components: { App }, // 传入 router 到 vue 实例 router }).$mount('#app')// app 上装载 router
让我们快速看看上面的代码。我们从 node modules
导入 Vue 类,然后我们还导入了 App
组件。
App
组件是由 vue cli 创建的默认组件。然而,我们导入它作为我们的根组件。
之后,我们再导入 vue-router
,然后告诉 Vue 类,它可以通过使用 vue.use(vuerouter)
来使用 vue-router
。
在下一行中,我们定义一个 routes
的常量,现在,我们将其设置为一个空数组。但是,routes
应该是一个对象数组,其中每个对象表示路径。不过,我们很快会看到。
接下来我们要做的是创建我们的 router(路由) 。我们可以传递两个参数给 Vue 路由的实例。
第一个参数是我们上面声明的 routes
数组,另一个参数作为模式。需要说明的是,这里我们把 mode
参数设置为'history'
,以防止我们的 URL
中包含 #
标记,这也被证明是不利于 SEO 的,当 URL
中包含 #
标记时。
之后,我们创建一个新的Vue实例,我们将详细配置传入根组件,以及声明 router(路由) 的装载节点。
在此刻,如果我们重启应用服务,我们会注意到,似乎没有任何变化。但是,我们现在已经设置了路由器。
接下来的下一步是用 router(路由) 插槽 <router -view></router>
标签替换我们的App组件的内容,里面每一个组件匹配的视图将被渲染。
现在打开你的 src/App.vue
文件,并将其替换为以下内容:
<template> <div id="app"> <!-- router(路由) 插槽, 其中所有匹配的组件将在这里呈现 --> <router-view></router-view> </div> </template> <script> export default { name: 'app', } </script> <!-- 组件样式 --> <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>
如果我们看看上面的代码,我们会注意到与 vue cli 自动生成的代码有一些差异,这些差异包括:
router-view
标签被放置在了 template 内,用于渲染视图。- 删除 hello 组件的 import 语句。
- 在 script 标签中删除了组件代码块。
这些组件因为不再需要而被删除,但最重要的是添加的 router(路由) 视图标签,如上所述。
此时,如果我们重新加载我们的应用,我们会看到一个空的页面。
设置 router(路由)
现在让我们继续添加 hello 组件作为主页的组件,并添加路径到我们的 routes
数组中。
打开你的 main.js
文件,并通过以下方式替换常量 routes
数组块代码:
// 导入 hello 组件 import Hello from './components/Hello' // 定义路由 const routes = [ // 定义应用的根 URL { path: '/', component: Hello } ]
如果我们看看上面的代码,我们导入了默认的 hello 组件,并为其分配路径,将其作为处理我们根路径的组件,因此,如果我们重新加载我们的页面,现在应该可以看到,如图:
从上图可以看出,Vue 的 logo 不见了,那是因为在我们替换 App 组件的内容时,删除了图像。
现在我们再定义一个 router(路由) ,因此,让我们再创建一个组件。
所以在 src/components
文件夹内创建一个名为 About.vue
的文件,将以下内容复制到 About.vue
文件中:
<template> <div id="about"> When you have a great story about how your product or service was built to change lives, share it. The "About Us" page is a great place for it to live, too. Good stories humanize your brand, providing context and meaning for your product. What’s more, good stories are sticky -- which means people are more likely to connect with them and pass them on. </div> </template> <script> export default { name: 'about' } </script> <!-- styling for the component --> <style> #about { 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>
现在来看看上面的组件。该组件在模板中保存一些文本,一旦我们打开关于页面的链接,它将被渲染。但是,我们仍然需要添加新的组件,并设置 router(路由) 路径,然后才能查看。
要做到这一点,打开你的 main.js
,并用下面的代码替换常量 routes
块代码:
// 导入 hello 组件 import Hello from './components/Hello' // 导入 about 组件 import About from './components/About' // 定义路由 const routes = [ // 主页路由 { path: '/', component: Hello }, // about 页面路由 { path: '/about', component: About } ]
在上面的代码中,现在唯一的区别是 导入了 about 组件和添加了 router(路由) 路径。
如果我们现在打开 http://localhost:8080/about
,我们会看到 about 组件的文本会被渲染。
使用路由链接
但是,这不是我们想要的。单页面应用的目的是使页面不再需要重新加载。为了这样,我们需要使用 <router -link></router>
标签。
让我们打开 App.vue
文件,然后添加路由链接。所以在组件的 <router -view></router>
声明之前,让我们添加两个路由链接:
<router-link v-bind:to="'/'">Home</router-link> <router-link v-bind:to="'/about'">About</router-link>
上面的代码会为我们创建两个锚点标签,并动态路由,使页面不需要重新加载。
如果你重新加载你的应用程序,我们会注意到上面添加了两个新的链接。点击这些链接,视图就会改变,并且页面不会重新加载。
在此刻,您的应用程序应该如下图所示。
在下图中,注意上面放置的两个链接,并且该页面不会重新加载。
结论
这篇文章介绍了如何创建一个简单的单页应用程序。
但是,您可以通过以下方式使其变得更加复杂:
- 添加更多路由
- 传递路径参数
- 使用路由保护,设置未经认证的用户可访问路由。
在本教程的下一部分中,我们将访问参数的传递,以及使用路由保护来保护您的应用程序。
完整的示例代码:https://github.com/samuelayo/vue-spapt1
原文链接:https://scotch.io/tutorials/how-to-build-a-simple-single-page-application-using-vue-2-part-1
复制以下代码,并替换为 src/main.js 内容:
26行 template: ”,
// 声明根组件可以访问的组件
应改为
template: ”,
// 声明根组件可以访问的组件
不然内容出不来
template: ”, <App/&rt
已经修改,谢谢斧正