Vue.js 构建 SPA

眉间是银河2024-09-04 22:55

使用 Vue.js 构建单页应用（SPA）是一个非常流行的选择，它提供了强大的工具和库来简化开发过程。步骤如下：

1. 安装 Vue CLI

首先，你需要安装 Vue CLI（命令行工具），它可以帮助你快速搭建 Vue 项目。

npm install -g @vue/cli

2. 创建新项目

使用 Vue CLI 创建一个新的 Vue 项目。

vue create my-vue-app

在这个过程中，你可以选择一些预设配置或者手动选择特性。

3. 进入项目目录

cd my-vue-app

4. 安装依赖

npm install

5. 添加 Vue Router

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用。

npm install vue-router

6. 配置 Vue Router

在 src 目录下创建一个 router.js 文件，并进行如下配置：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

修改 main.js

在 main.js 中引入并使用路由配置：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

创建视图组件

在 src/views 目录下创建 Home.vue 和 About.vue 文件：

Home.vue:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

About.vue:

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

修改 App.vue

在 App.vue 中添加导航链接：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

10. 运行项目

npm run serve

浏览器中访问 http://localhost:8080