Vue 2 提升到另外一个水平
讲师：Vue Msatery Team
口袋资源独家Vue Mastery付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
欢迎来到下一级 Vue。本课程的先决条件包括以下知识：
- 命令行界面
- 路由器
- 单文件 .vue 组件
- 使用 Axios 调用 API
- Vuex
在本视频中，我们将运行我们的示例应用程序，然后浏览代码。如果您一直在学习我们的 Real World Vue 和 Mastering Vuex 课程，您可以直接跳到下一课。但如果您刚刚加入我们，让我们看一下我们将在整个课程中使用的示例应用程序。
下载应用程序
我们应用程序的起始代码位于github 此处。请将其下载到您的计算机，以便您可以继续操作。
启动并运行应用程序
如果您从终端导航到该项目，则可以运行npm install以安装该项目的所有依赖项。
由于我们的应用程序将进行 API 调用，因此我们将使用json-server。这是一个完全伪造的 REST API，它允许我们执行从模拟数据库中提取的 API 调用。如果您还没有，则需要安装该库。为此，请在您的终端中运行此命令： npm install -g json-server。然后我们需要运行命令json-server --watch db.json，它打开 json-server 并告诉它监视我们的 db.json 文件，这是我们的模拟数据库。
最后，我们需要确保安装了我们正在使用的第三方日期选择器库，其中：npm install --save vuejs-datepicker
现在，为了让我们的应用程序实时运行，我们将运行命令npm run serve：我们的终端会让我们知道我们的应用程序运行在哪个本地主机端口上。
在浏览器中探索应用
一旦我们在浏览器中打开该本地主机，我们就可以看到我们的应用程序。
在主页上，我们显示了我们使用 API 引入的事件列表。当我单击某个事件时，我们将转到显示event-show该事件的完整详细信息的页面。我们使用 Vue Router 进行导航，这也允许我们导航到页面event-create，我们可以在其中创建事件。每当提交表单或发生 API 调用错误时，我们还会在应用程序的右下角显示通知。
现在我们已经看到应用程序正在运行，让我们看看项目本身。
应用之旅
我们使用 Vue CLI 创建了应用程序，它为我们提供了这个目录结构。
首先，我们关心的是我们的db.json文件和这些目录：
让我们探索这些文件中发生了什么。
在我们的服务目录中，我们有EventService.js，它创建了我们的单个 Axios 实例，并使用 json-server 来调用我们的模拟数据库，即db.json。
store目录包含我们所有的 Vuex 代码，包括store.js ，它是根状态，分支三个 Vuex 模块：event.js、notification.js、user.js。这些模块有自己的 State、Mutations 和 Actions，它们使用我们的EventService来执行 API 调用。
在我们的views目录中，我们有三个组件，当我们路由到这些视图时会加载它们，其中一些具有子组件。这些视图级组件也包括 Vuex 代码。
深入代码
希望您对我们项目中发生的事情有更好的了解。如果您还没有参加我们的 Real World Vue 和 Mastering Vuex 课程，我们鼓励您下载该应用程序并探索这些文件。如果您不熟悉这些先决条件概念中的任何一个，您将需要在继续学习之前访问这些课程。
