First, modify some configurations

  1. .eslintrc.js
//.eslintrc
module.exports = {
    ...
    rules: {
        'no-console': 'off'.'import/no-unresolved': [
            2,
            {
                ignore: ['^ @ /'].// @ is the path alias},],},... };Copy the code
  1. tsconfig.json
//tsconfig.json
{
    "compilerOptions": {
        "target": "esnext"."module": "esnext"."moduleResolution": "node"."strict": true."jsx": "preserve"."sourceMap": true."resolveJsonModule": true."esModuleInterop": true."lib": ["esnext"."dom"]."noImplicitAny": false."baseUrl": "."."paths": {
            "@ / *": [
                "src/*"]}},"include": ["src/**/*.ts"."src/**/*.d.ts"."src/**/*.tsx"."src/**/*.vue"]}Copy the code

Second, new layout

  1. Create a new Layout directory in the project root directory
  2. Create an index.vue in the Layout directory
// @/layout/index.vue
<template>
    <a-layout class="layout">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            <div class="logo" />
            <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
                <a-menu-item key="/">
                    <dashboard-outlined />
                    <span>Home page</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0 20px">
                <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = ! collapsed)" />
                <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = ! collapsed)" />
            </a-layout-header>
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
                <router-view />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script lang="ts">
import { DashboardOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
    components: {
        DashboardOutlined,
        MenuUnfoldOutlined,
        MenuFoldOutlined,
    },
    setup() {
        return {
            selectedKeys: ref<string[]>(['/']),
            collapsed: ref<boolean>(false),}; }});</script>
<style lang="less" scoped>
.layout {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.logo {
    margin: 20px auto;
    width: 80%;
    height: 40px;
    background: # 334454;
}
#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3 s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255.255.255.0.3);
    margin: 16px;
}

.site-layout .site-layout-background {
    background: #fff;
}
</style>

Copy the code

3. Modify routes

  1. Add layout parameters to meta
  2. Use this parameter to determine whether the current page is displayed in the Layout
// @/router/index.ts.const routes = [
    {
        path: '/'.name: 'home'.component: () = > import('.. /views/Home/index.vue'),
        meta: {
            title: 'home'.layout: true,}}, {path: '/login'.name: 'Login'.component: () = > import('.. /views/Login/index.vue'),
        meta: {
            title: 'login'.layout: false,}},]; .Copy the code

4. Modify app.vue

<template>
    <layout v-if="$route.meta.layout" />
    <router-view v-else />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import layout from '@/layout/index.vue';
export default defineComponent({
    name: 'App'.components: {
        layout,
    },
});
</script>

<style lang="less">
#app {
    width: 100%;
    height: 100%;
}
</style>
Copy the code
  1. Modify app. vue and run the project
  2. When you access the ‘/’, you see the home page in the Layout
  3. When you access ‘/login’, you see a full-screen login page
  4. The laOUT layout is successful

5. Axios request encapsulation

  1. Create a request directory under SRC
  2. Create an API directory under @/request
  3. Create base.ts under @/request
  4. Create http.ts under @/request
  5. Create loginapi.ts under @/request/ API
// @/request/base.ts
const base = {
    baseurl: '/mock'};export default base;

Copy the code
// @/request/http.ts
import base from '@/request/base';
import axios, { AxiosRequestConfig } from 'axios';

// Set the timeout period
const instance = axios.create({
    timeout: 1000 * 10});// Set the public path and content-type
instance.defaults.baseURL = base.baseurl;

interface AxiosConfig extends AxiosRequestConfig {
    loading: boolean;
}

const Fetch = ({
    url = ' ',
    method = 'GET',
    data = {},
    params = {},
    headers = {
        'Content-Type': 'application/json',
    },
    loading = true,
}: AxiosConfig) = > {
    if (loading) {
        // loading
    }

    return new Promise((resolve, reject) = > {
        instance({
            url,
            method,
            data,
            params,
            headers,
        })
            .then((res) = > {
                resolve(res.data.data);
            })
            .catch((err) = > {
                reject(err);
            });
    });
};

export default Fetch;
Copy the code
// @/request/api/loginAPI.ts
import Fetch from '@/request/http';

const LoginAPI = {
    /** * Account password login *@param {Object} data* /
    setLogin(data) {
        return Fetch({
            method: 'POST'.url: `/api/login`, data, }); }};export default LoginAPI;
Copy the code

Modify the login page

//@/view/login/index.vue

......

<script lang="ts">.import LoginAPI from '@/request/api/loginAPI'; .const onSubmit = () = > {
    loginFormRef.value.validate().then(() = > {
        LoginAPI.setLogin(toRaw(loginForm)).then((r) = > {
            console.log(res);
            router.push({ path: '/' });
        });
        // axios({
        // url: '/mock/api/login',
        // method: 'POST',
        // data: toRaw(loginForm),
        // }).then((res) => {
        // router.push({ path: '/' });
        // });}); }; .</script>
Copy the code
  1. Test the login feature
  2. Request encapsulation successful

Seven, source code address

https://github.com/jiangzetian/vue3-admin-template
Copy the code

Eight, video demonstration and source code

Demo video of this article: Click browse

More front-end content welcome to pay attention to the public number: day small day personal network