Vue.js 构建 SPA

使用 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
    }
  ]
});
  1. 修改 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');
  1. 创建视图组件

src/views 目录下创建 Home.vueAbout.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>
  1. 修改 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

相关推荐
清风92001 分钟前
Logback——日志技术(基础)
java·前端·logback
EndingCoder2 分钟前
排序算法与前端交互优化
开发语言·前端·javascript·算法·排序算法·交互
晓13133 分钟前
JavaScript加强篇——第五章 DOM节点(加强)与BOM
java·开发语言·javascript
三月的一天27 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰27 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead32 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future141243 分钟前
项目开发日记
前端·学习·c#·游戏开发
汪子熙1 小时前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315231 小时前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple1 小时前
第一次搭建数据库
服务器·前端·javascript·数据库