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

相关推荐
excel1 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着1 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友3 小时前
什么是API签名?
前端·后端·安全
会豪5 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子5 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶5 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子5 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_5 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark5 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23335 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts