vue-cli 构建第一个单页面应用

最新推荐文章于 2024-08-25 18:02:18 发布

原创

最新推荐文章于 2024-08-25 18:02:18 发布 · 568 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何使用vue-cli 3.2.1版本构建一个包含vue-router的单页面应用。从vue-router的安装，到在src/router/index.js中定义路由，再到main.js中引入和配置路由，以及在App.vue中设置router-view和组件，最后展示了页面代码和遇到的问题。通过这个过程，强调了查阅文档和解决问题的重要性。

听同事讲，后端学vue只要3天就会了，差点信以为真了~

先看了一下vue的文档，因为之前也看过react的文档，感觉差不多，特色都是页面模块化，自动生成统一管理。

脚手架安装和上线部署就不说了，都是node ，npm 之类的，我使用的 vue 3.2.1版本。

单页面除了默认自带的文件以外，需要额外npm install vue-router。

先上效果：

下面是开发步骤：

vue create XXX 创建XXX项目，自动模式

npm install vue-router ,然后就可以在项目里使用了。

创建默认项目后，我添加了src/router/index.js 路由文件。内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import Mine from '@/components/Mine.vue'

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Mine',
      name: 'Mine',