如何从 JavaScript 到 Vue.js 打造你的第一个 SPA 应用-JavaScript中文网-JavaScript教程资源分享门户

介绍

单页应用（Single Page Application，简称 SPA）是一种现代化的 Web 应用程序设计模式，它通过 JavaScript 动态地替换页面内容，实现了无需刷新页面就可以实现页面切换和数据交互的效果。Vue.js 是一款流行的 JavaScript 框架，它可以帮助我们快速地构建 SPA 应用。本文将介绍如何从 JavaScript 到 Vue.js 打造你的第一个 SPA 应用。

前置知识

在开始本文之前，你需要掌握以下知识：

HTML、CSS 和 JavaScript 的基础知识；
前端框架的基础概念；
Node.js 和 npm 的基础知识。

准备工作

在开始本文之前，你需要安装 Node.js 和 npm。安装完成后，在命令行中执行以下命令来安装 Vue.js：

npm install vue

创建项目

我们使用 Vue CLI 工具来创建项目。在命令行中执行以下命令：

npm install -g @vue/cli
vue create my-project

其中 my-project 是你的项目名称。在创建项目时，你需要选择一些配置项，比如是否使用 Babel、ESLint、TypeScript 等。如果你不确定，可以选择默认配置。

创建完成后，进入项目目录：

cd my-project

然后执行以下命令启动开发服务器：

npm run serve

在浏览器中访问 http://localhost:8080，你应该能看到一个欢迎页面。

构建页面

在 Vue.js 中，我们使用组件来构建页面。一个组件通常包含 HTML 模板、JavaScript 代码和 CSS 样式。我们可以在一个单独的文件中定义一个组件，比如：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="count++">Click me</button>
    <p>You clicked the button {{ count }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

在上面的代码中，我们定义了一个组件，它包含了一个标题、一个按钮和一个计数器。当用户点击按钮时，计数器会增加。这个组件的 HTML 模板使用了 Vue.js 的模板语法，JavaScript 代码使用了 Vue.js 的数据绑定和事件处理功能，CSS 样式使用了普通的 CSS 语法。

我们可以在 App.vue 文件中定义一个根组件，然后在其中引入其他组件。在 src 目录下创建一个名为 App.vue 的文件，然后输入以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{ message }}</h1>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  components: {
    MyComponent
  }
}
</script>

在上面的代码中，我们定义了一个根组件，它包含了一个标题和一个子组件。子组件的名称是 MyComponent，它是在同一个目录下的 MyComponent.vue 文件中定义的。

在 src 目录下创建一个名为 MyComponent.vue 的文件，然后输入以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="count++">Click me</button>
    <p>You clicked the button {{ count }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My Component',
      count: 0
    }
  }
}
</script>

<style>
h2 {
  color: blue;
}
</style>

在上面的代码中，我们定义了一个名为 MyComponent 的组件，它包含了一个标题、一个按钮和一个计数器。当用户点击按钮时，计数器会增加。这个组件的 HTML 模板、JavaScript 代码和 CSS 样式都在同一个文件中定义。

现在我们已经定义了两个组件，一个是根组件 App，另一个是子组件 MyComponent。我们可以在 App.vue 文件中引入 MyComponent 组件，并在模板中使用它。在 App.vue 文件中输入以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{ message }}</h1>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  components: {
    MyComponent
  }
}
</script>

现在我们已经构建了一个简单的页面，它包含了一个标题和一个子组件。当用户点击子组件中的按钮时，计数器会增加。

配置路由

在 SPA 应用中，我们通常需要配置路由，以便用户可以在不刷新页面的情况下切换页面。Vue.js 提供了一个名为 Vue Router 的路由库，它可以帮助我们快速地配置路由。

在命令行中执行以下命令安装 Vue Router：

npm install vue-router

然后在 src 目录下创建一个名为 router.js 的文件，输入以下代码：

// javascriptcn.com 代码示例
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

在上面的代码中，我们定义了两个路由，一个是根路由 /，对应的组件是 Home，另一个是 /about，对应的组件是 About。我们还配置了 Vue Router 的 mode 为 history，这样用户在切换页面时，URL 中不会出现 # 符号。

在 src 目录下创建一个名为 views 的目录，并在其中创建两个名为 Home.vue 和 About.vue 的文件。在这两个文件中分别输入以下代码：

<!-- Home.vue -->
<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page!</p>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the about page!</p>
  </div>
</template>

现在我们已经配置了路由，并定义了两个页面。我们可以在 App.vue 文件中使用 <router-view> 标签来显示当前路由对应的组件。在 App.vue 文件中输入以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{ message }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
import router from './router'

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  router
}
</script>

现在我们已经配置了路由，并在根组件中使用了 <router-view> 标签。当用户访问 / 时，会显示 Home 组件的内容；当用户访问 /about 时，会显示 About 组件的内容。

发送请求

在 SPA 应用中，我们通常需要与后端服务器进行数据交互。Vue.js 提供了一个名为 Axios 的 HTTP 库，它可以帮助我们发送 HTTP 请求。

在命令行中执行以下命令安装 Axios：

npm install axios

然后在 src 目录下创建一个名为 api.js 的文件，输入以下代码：

// javascriptcn.com 代码示例
import axios from 'axios'

const API_BASE_URL = 'https://jsonplaceholder.typicode.com'

export function getPosts() {
  return axios.get(`${API_BASE_URL}/posts`)
}

export function getPost(id) {
  return axios.get(`${API_BASE_URL}/posts/${id}`)
}

在上面的代码中，我们定义了两个函数，一个是 getPosts，用于获取所有帖子的列表；另一个是 getPost，用于获取指定 ID 的帖子的详情。

现在我们可以在组件中使用这些函数来发送请求。在 Home.vue 文件中输入以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h2>Home</h2>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="{ name: 'post', params: { id: post.id } }">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { getPosts } from '../api'

export default {
  data() {
    return {
      posts: []
    }
  },
  async created() {
    const response = await getPosts()
    this.posts = response.data
  }
}
</script>

在上面的代码中，我们使用了 Vue.js 的 v-for 指令来遍历帖子列表，并使用了 Vue Router 的 <router-link> 组件来创建链接。当用户点击链接时，会跳转到指定 ID 的帖子的详情页面。

在 About.vue 文件中输入以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h2>About</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  async created() {
    this.message = 'Loading...'
    const response = await fetch('https://api.github.com/repos/vuejs/vue')
    const data = await response.json()
    this.message = `Vue.js has ${data.stargazers_count} stars on GitHub!`
  }
}
</script>

在上面的代码中，我们使用了 JavaScript 的 fetch 函数来发送请求，并使用了 async/await 语法来异步获取数据。当数据加载完成后，我们会显示一个消息，显示 Vue.js 在 GitHub 上的星星数。

总结

在本文中，我们介绍了如何从 JavaScript 到 Vue.js 打造你的第一个 SPA 应用。我们学习了如何使用 Vue CLI 工具创建项目、如何构建页面、如何配置路由、如何发送请求等。这些知识对于开发现代化的 Web 应用程序非常重要。希望本文能够帮助你更好地理解 Vue.js 和 SPA 应用的开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65658e2ed2f5e1655dec92c0