您的位置:首页 » 分类: 前端资源 & Vue.js » 文章: 如何使用 Vue 2 构建简单的单页应用程序(第 1 部分)

如何使用 Vue 2 构建简单的单页应用程序(第 1 部分)

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

今天,我们将学习如何使用 Vue 构建单页应用程序。

Vue.js 是一个构建交互式Web界面的库。 它为 数据反应式(data-reactive) 组件提供了一个简单而灵活的API。

为了本教程的目的,术语 Vue 指的是 Vue 2.X 版本,除非另有说明。

前端免费公开课大纲

  • 1 低端前端工程师命运何去何从?
  • 2 “大前端”时代,程序员面临的技能挑战
  • 3 Do Less & Learn More
  • 4 人口红利?移动红利?数据红利?
  • 5 弱工程 & 强业务
  • 6 从普通工程师进阶到前端架构师的一点成长建议
点击扫描报名

我们将构建什么

让我们快速了解一下我们正在构建的内容,如图:

完整的示例代码:https://github.com/samuelayo/vue-spapt1

通过本教程希望你已经掌握:

  1. Vue 的基础知识。
  2. 如何创建 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

在上面的命令中,我们会注意到两个陌生的单词 webpackspa

这个命令中的 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 构建单页应用变得轻而易举。功能包括:

  1. 嵌套路由 / 视图映射
  2. 模块化,基于组件的路由配置
  3. 路由参数,查询,通配符
  4. Vue.js transition(过渡) 系统提供的视图过渡效果
  5. 精细的导航控制
  6. 与自动的激活 CSS 类链接
  7. HTML5 history(历史记录)模式 或 哈希模式,在 IE9 中自动回退
  8. 可定制的 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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

3 条评论 - 关于 “如何使用 Vue 2 构建简单的单页应用程序(第 1 部分)

  1. 复制以下代码,并替换为 src/main.js 内容:
    26行 template: ”,
    // 声明根组件可以访问的组件
    应改为
    template: ”,
    // 声明根组件可以访问的组件
    不然内容出不来

发表评论

电子邮件地址不会被公开。 必填项已用*标注