创建vue3项目并初始化

使用vite直接创建-------最快速创建

打开命令行输入：npm init vite 回车
Ok to proceed? y
Project name: › basic-vue3 //项目名称
Select a framework: vue //选择vue
Select a variant: TypeScript //类型

Done. Now run:
  //接下来执行下面三个命令
  cd basic-vue3 //进入目录
  npm install //安装依赖
  npm run dev //运行项目

一、初始化-路由

npm install vue-router

1.在src文件夹下创建view文件夹，然后在view文件夹下创建A.vue和B.vue文件，如下图所示

A.vue

<template>
  <div>A</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

B.vue

<template>
  <div>B</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2.在src文件夹下创建router文件夹，然后在router文件夹下创建index.ts文件和routes文件夹，在routes文件夹创建index.ts文件。如下图所示

router文件夹下的index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import { basicRoutes } from './routes';
import type { App } from 'vue';
import type { RouteRecordRaw } from 'vue-router';

// app router
export const router = createRouter({
    history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
    routes: basicRoutes as unknown as RouteRecordRaw[],
    strict: true,
    scrollBehavior: () => ({ left: 0, top: 0 }),
});

// config router
export function setupRouter(app: App<Element>) {
    app.use(router);
}

routes文件夹下的index.ts

export const RootRoute = {
    path: '/',
    name: 'Root',
    redirect: 'a',
    meta: {
        title: 'Root',
    },
};

export const ARoute = {
    path: '/a',
    name: 'A',
    component: () => import('/@/view/A.vue'),
    meta: {
        title: 'A页面',
    },
};

export const BRoute = {
    path: '/b',
    name: 'B',
    component: () => import('/@/view/B.vue'),
    meta: {
        title: 'B页面',
    },
};

export const basicRoutes = [
    RootRoute,
    ARoute,
    BRoute,
];

3.为了方便观看效果，增加登陆页，并改变App.vue和main.ts

App.vue

<template>
  <RouterView />
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

main.ts

import App from './App.vue';
import { createApp } from 'vue';
import { router, setupRouter } from '/@/router';

async function bootstrap() {
    const app = createApp(App);
    // Configure routing
    setupRouter(app);
    await router.isReady();

    app.mount('#app', true);
}

void bootstrap();

在view文件夹下创建文件夹login，在login文件夹下增加Login.vue页面，并增加相应路由。为使css美观，可以使用less或者scss。本示例使用less。

下载依赖
npm install less
查看版本
lessc -v

Login.vue

<template>
  <div class="login-page">
    <div class="login-page-title">这是登陆页</div>
    <div class="login-page-form">
      <div class="login-page-button" @click="handleRoute('/a')">登陆</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
import { router } from "/@/router";
export default defineComponent({
  name: "Login",
  props: {},
  setup() {
    /**
     * @Function:系统登陆事件，路由跳转
     * @Author: zxl
     * @Date: 2023-02-16 15:47:12
     * @param {*}
     */
    const handleRoute = (val) => {
      router.push(val);
    };

    /**
     * @Function: 组件挂载
     * @Author: zxl
     * @Date: 2023-02-16 15:47:12
     * @param {*}
     */
    onMounted(() => {});

    return {
      handleRoute,
    };
  },
});
</script>

<style scoped lang='less'>
// 登陆部分
.login-page {
  width: 100%;
  height: 100vh;
  background: rgb(94, 199, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  .login-page-title {
    position: absolute;
    top: 0;
    color: #fff;
  }
  .login-page-form {
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    .login-page-button {
      width: 82px;
      height: 32px;
      background: #1890ff;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>

效果图：登陆页

效果图：A

二、安装 Ant Design Vue UI框架

npm install ant-design-vue --save