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

相关推荐
liangshanbo121519 分钟前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_3 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD3 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~3 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15884 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫4 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo4 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li5 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐5 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine