第一节 vue3 搭配 vue-cli vue-router 创建简易项目

本文链接：https://blog.csdn.net/muxianer/article/details/123473606

前言
vue3 已经可以放心食用了，但目前网上教程多是以TS作为基础讲解的，本文将以JS为基础搭建一个简易的vue3项目。

一、准备

1.首先需要检查Npm版本，因为需要3.0.0以上才能支持vue3.x

npm -v
2.3.0
cnpm install npm -g
npm -v
8.1.2

更新vue，建议使用淘宝镜像

cnpm i vue@next

3.升级vue-cli，并查看版本

cnpm install -g @vue/cli
vue --version
5.0.1

二、创建项目
1.创建项目

mkdir vue3
cd vue3
vue create hello-vu3

Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features 
// 通过键盘上下回车选择 Default ([Vue 3] babel, eslint) 
// 当然，也可以选择Manually select features 手动选择特性
// 可以安装TS、PWA、Router、vuex等等
// 目前我们以选择1为示例
// 耐心等待，直到提示，就安装好了
🎉  Successfully created project hello-vue3.
👉  Get started with the following commands:

 $ cd hello-vue3
 $ npm run serve

2.现在让我们尝试启动项目

cd hello-vue3
npm run serve
如果一切顺利，当我们访问http://localhost:8080/，我们就可以看到熟悉的vue页面了

在这里插入图片描述
3. 在下一步之前，先让我们关掉eslint,找到 vue.config.js 文件，添加以下代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false // 添加此行以关闭eslint
})

三、修改项目

1.现在让我们安装router及其他依赖，并且更改文件结构
在src文件夹下新增views、router文件夹
在views文件夹下新增aPage.vue和bPage.vue
在router文件夹下新增index.js和routes.js

cnpm i vue-router
cnpm install @vue/composition-api

aPage.vue和bPage.vue新增以下代码, 请注意把两个页面的代码更换一下，为了方便，我就不把两个vue源码复制上了

<template>
  <div>
  //	aPage.vue
    我是a页面
  //    bPage.vue
  //  我是b页面
  </div>
  <br/>
  // aPage.vue
  <button @click="pageRouter">点我去B页面</button>
  // bPage.vue
  // <button @click="pageRouter">点我去A页面</button>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const route = useRouter();
    let pageRouter = () => {
      route.push({
      	// aPage.vue
        path: "/bPage",
        // bPage.vue
        // path: "/aPage",
      });
    };
    return {
      pageRouter,
    };
  },
})
</script>

在router/index.js文件中添加以下代码

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes.js';

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在router/routes.js文件中添加以下代码

export default [
  {
    path: '/',
    redirect: '/aPage'
  },
  {
    path: '/aPage',
    name: 'aPage',
    component: () => import('@/views/aPage.vue')
  },
  {
    path: '/bPage',
    name: 'bPage',
    component: () => import('@/views/bPage.vue')
  },
]

修改APP.vue

<template>
  <router-view />
</template>

<script>

export default {

}
</script>

在Main.js中使用路由

import { createApp } from 'vue'
import App from './App.vue'
import routes from './router/index';

createApp(App).use(routes).mount('#app')

2.现在我们重新启动serve,如果一切顺利，你将看到以下页面，点击点我去B页面，将跳转到bPage.vue

npm run serve

在这里插入图片描述
三、设置容器布局

如果我们想实现类似的布局，header做标签切换，但我们希望只有Content的内容会更新，hearder和footer都不更新，那么我们就需要实现一个容器布局

在这里插入图片描述

1.现在让我们在components文件夹下新增两个文件mainPage.vue、menuPage.vue

// menuPage.vue
<template>
  <div class="nav">
    <button @click='goAPage'>菜单a</button>
    <button @click='goBPage'>菜单b</button>
  </div>
</template>
<script>
import { defineComponent } from "@vue/composition-api";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const route = useRouter();
    let goBPage= () => {
      route.push({
        path: "/bPage",
      });
    };
    let goAPage= () => {
      route.push({
        path: "/aPage",
      });
    };
    return {
      goBPage,
      goAPage
    }
  }
})
</script>

<style lang="css" scoped>
  .nav { overflow: hidden; margin-bottom: 20px; width: 100%; height: 50px; background: #2d8cf0;}
  .nav button {display: inline-block; margin: 10px 30px 0 30px ; cursor: pointer; height: 30px; line-height: 30px; }
</style>

// mainPage.vue
<template>
  <div>
    <menu-page />
    <div class="main_contant">
      <router-view />
    </div>
  </div>
</template>

<script>
import { defineComponent } from "@vue/composition-api";
import menuPage from '@/components/menuPage.vue'
export default defineComponent({
  components: {
    menuPage
  },
  setup() {

  },
});
</script>

2.修改router/routes.js

import Main from '@/components/mainPage.vue'

export default [
  {
    path: '/',
    redirect: '/aPage'
  },
  {
    path: '/aPage',
    name: 'aPage',
    component: Main,
    children: [
      {
        path: '/aPage',
        name: 'aPage',
        component: () => import('@/views/aPage.vue')
      }
    ]
    
  },
  {
    path: '/bPage',
    name: 'bPage',
    component: Main,
    children: [
      {
        path: '/bPage',
        name: 'bPage',
        component: () => import('@/views/bPage.vue')
      }
    ]
  },
]