vue 构建单页应用_如何使用Vue 2构建简单的单页应用程序（第1部分）

vue 构建单页应用

Today, we will be learning how to build a single page application using Vue.

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

Vue.js is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

Vue.js是用于构建交互式Web界面的库。 它通过简单灵活的API提供了对数据敏感的组件。

For the purpose of this tutorial, the term Vue refers to Vue 2.X versions unless stated otherwise.

就本教程而言，除非另有说明，否则术语Vue指的是Vue 2.X版本。

我们将建立什么 ( What We Will Build )

Let's take a quick view at what we would be building:

让我们快速了解一下我们将要构建的内容：

This tutorial, however, hopes that you do understand:

但是，本教程希望您理解：

1.) The basics of Vue. 2.) How to create Vue Components.

1.） Vue的基础知识。 2.）如何创建Vue组件。

Vue CLI入门 ( Getting started with the Vue CLI )

To get started easily, and also skip the process of configuring webpack for the compilation from ES6 to ES5, we would use the vue cli. If you do not have the Vue cli installed, we can install it by doing the following.

为了轻松上手，并且跳过配置用于从ES6到ES5的编译的webpack的过程，我们将使用vue cli 。 如果您尚未安装Vue cli，我们可以通过以下操作进行安装。

sudo npm install -g vue-cli

After installing the vue-cli, it is now time for us to create a vue project. To do that, we run the following command.

安装vue-cli之后，现在是时候创建一个vue项目了。 为此，我们运行以下命令。

Note: For the purpose of this tutorial, while running the command below, I chose no when asked for code linting.

注意：出于本教程的目的，在运行以下命令时，当要求输入代码时，我选择否 。

Code linting would make sure that codes are properly indented, as well as empty spaces are not left. But I like to leave empty spaces in my code, to keep it organized.

代码整理将确保代码正确缩进，并且不留空白。 但是我喜欢在代码中保留空白，以保持代码的井井有条。

vue init webpack spa

In the above command, we would notice two strange words which are webpack and spa.

在上面的命令中，我们会注意到两个奇怪的词，分别是webpack和spa 。

Webpack in this command refers to the name of the template we would like to scaffold, as the vue-cli helps us to scaffold templates. There are different templates to use, for more information on that, you can visit here.

该命令中的Webpack指的是我们想要安装的模板的名称，因为vue-cli帮助我们安装了模板。 您可以使用不同的模板，有关更多信息，请访问此处 。

Spa in this command refers to the folder name for our application which would be created. After running the above code, we would need to change directory into our application, and install the modules:

此命令中的Spa是指将要创建的应用程序的文件夹名称。 运行上面的代码后，我们需要将目录更改到我们的应用程序中，并安装模块：

//change directory to the foldercd spa
//install all required npm modules
  npm install
//run the development server
  npm run dev

After running the above commands, if we go to http://localhost:8080, we should see this:

运行上述命令后，如果转到http：// localhost：8080 ，则应该看到以下内容：

安装和配置Vue路由器 ( Installing and configuring the Vue router )

Now we are set up an