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

相关推荐
attitude.x4 分钟前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 分钟前
CSS3核心技术
前端·css·css3
空山新雨(大队长)21 分钟前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术1 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫1 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓1 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java1 小时前
CSS的文本样式
前端·css
前端小趴菜051 小时前
css - 滤镜
前端·css
祈祷苍天赐我java之术1 小时前
理解 CSS 浮动技术
前端·css