const app = document.getElementById('app');

const app = $('#app');

<子组件名 属性名="传递的数据值"></子组件名>

<Child str="hello" v-bind:num="20" v-bind:arr="[1, 2, 3]"></Child>

export default {
    props: ['属性名一', '属性名二', ...]
}

<template>
 <p>{{num}}</p>
</template>
<script>
export default {
    props: ['num'],
    computed: {
        sum() {
            return this.num + this.num;
        }
    }
}
</script>

export default {
    props: ['num'],
    data() {
        return {
            count: this.num
        }
    }
}

export default {
    props: ['num'],
    computed: {
        count() {
            return this.num;
        }
    }
}

export default {
    props: {
        msg: String,
        num: [String, Number],
        name: {
            type: String,
            required: true,  // 父组件必须传
        },
        gender: {
            type: String,
            default: "男",  // 默认值
        },
        friends: {
            type: Array,
            default: () => ["张三"],  // 数组的默认值
        },
        student: {
            type: Object,
            default: () => ({ name: "张三" }),   // 对象的默认值
        },
    },
};

import axios from 'axios';

axios({
    url: '',  // 请求路径
    method: 'POST', // 请求类型，例如 GET、POST、DELETE、PUT...
    data: {
        参数名: 参数值
    }
})

axios({
    url: '',  // 请求路径
    method: 'GET', // 请求类型，例如 GET、POST
    params: {
        参数名: 参数值
    }
})

axios({
    // ...
}).then(res => {
    console.log('后端返回的结果', res.data);
})

async 方法名() {
    const res = await axios({
        // ...
    });
    console.log('后端返回的结果', res.data)
}

export default {
    methods: {
        async login() {
            // 发送登录请求
            const res = await this.$api.users.login(this.form);
            if (res.code) {
                // 将 token 保存到本地存储
                localStorage.token = res.token;
                this.$router.push("/home");
            } else {
                this.$message.error("账号或密码错误，登录失败。");
            }
        }
    }
}

import api from '@/api';
const routes = [
    {
        path: '/home',
        name: 'Home',
        component: HomeView,
        // 路由前置守卫
        beforeEnter: async (to, from, next) => {
            const token = localStorage.token;
            if (token) {
                // 根据 token 获取用户信息
                const res = await api.users.getUserInfo();
                console.log(res);
                return;
            }
            alert('你还未登录，请先登录');
            next('/login');
        }
    }
]

export default new Vuex.Store({
    state: {
        userInfo: {},   // 用户信息的初始值
    },
    getters: {
        username: state => state.userInfo.username   // 筛选用户信息中的用户名
    },
    mutations: {
        // 接收最新的用户数据，并保存到 state 中
        SET_USER_INFO(state, payload) {
            state.userInfo = payload;
        }
    }
})

import store from '@/store';
const routes = [
    {
        //...
        // 路由前置守卫
        beforeEnter: async (to, from, next) => {
            const token = localStorage.token;
            if (token) {
                // 根据 token 获取用户信息
                const res = await api.users.getUserInfo();
                if (res.code) {
                    store.commit('SET_USER_INFO', res.data); // 调用 mutations 将用户信息保存到 state
                    next();   // 让用户进入对应的页面
                    return;
                }
            }
            alert('你还未登录，请先登录');
            next('/login');
        }
    }
]

<p>欢迎你，{{$store.getters.username}}</p>
<p>欢迎你，{{username}}</p>

export default {
    computed() {
        username() {
            return this.$store.getters.username;
        }
    }
}

// 请求拦截器：当前端的请求在发送到后端去之前，会拦截下来
axios.interceptors.request.use((config) => {
    // 所有请求在发往后端去之间，都先拦截下来，给请求头中添加 token
    config.headers.Authorization = localStorage.token;
    return config;
})

import router from "@/router";
import { MessageBox } from 'element-ui';

// 响应拦截器：当后端返回的结果到达前端页面之前，会被拦截下来
axios.interceptors.response.use((res) => {
    // 响应成功时执行的函数
    return res.data;
}, (err) => {
    // 响应失败时执行的函数
    if (err && err.response && err.response.status) {
        if (err.response.status === 401) {
            MessageBox.alert('登录已过期，请重新登录', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    router.replace('/login');
                }
            });
        }
    }
    return Promise.reject(err.message);
});

export default new Vuex.Store({
    state: {
    },
    getters: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

<template>
    <div>
        <h1>父组件</h1>
        <EventChild v-on:fatherEvent="fatherEvent"></EventChild>
    </div>
</template>

<script>
import EventChild from "./EventChild.vue";
export default {
    components: {
        EventChild,
    },
    methods: {
        fatherEvent(value) {
            console.log("父组件的方法");
        },
    },
};
</script>

<template>
    <div>
        <h3>子组件</h3>
        <button v-on:click="$emit('fatherEvent', 100)">按钮</button>
        <button v-on:click="childEvent">按钮</button>
    </div>
</template>

<script>
export default {
    methods: {
        childEvent() {
            this.$emit('fatherEvent', 'hello');
        }
    }
};
</script>

import axios from "axios";
axios.defaults.baseURL = "http://47.98.128.191:3000";

axios.interceptors.response.use(res => res.data);

import './utils/request.js'

import axios from 'axios';

const students = {
    get(params) {
        return axios({
            url: '/students/getStudents',
            method: 'GET',
            params: params
        })
    },
    delete() {

    },
    add() {

    },
    update() {

    }
}

export default students;

import students from './modules/students.js'
import classes from './modules/classes.js'

const api = {
    students: students,
    classes: classes
    // ... 其他模块
}

export default api;

import api from '@/api';
Vue.prototype.$api = api;

export default {
    data() {
        return {
            tableData: [],
        };
    },
    created() {
        this.getStudents();
    },
    methods: {
        async getStudents() {
            const res = await this.$api.students.get();
            if (res.code) {
                this.tableData = res.data.rows;
            }
        },
    },
};

export default new Vuex.Store({
    state: {
        authMenus: [], // 权限菜单数据
    },
    mutations: {
        SET_AUTH_MENUS(state, payload) {
            state.authMenus = payload;
        }
    },
    actions: {
        async getAuthMenusAsync({ commit }) {
            const res = await api.users.getAuthMenus();
            if (res.code) {
                commit('SET_AUTH_MENUS', res.data);
            }
        }
    }
})

import { mapActions, mapState } from "vuex";
export default {
    data() {
        return {
            menus: [
                // ... 完整的菜单数据
            ],
        };
    },
    created() {
        this.getAuthMenusAsync();
    },
    computed: {
        ...mapState(["authMenus"]),
        // 根据权限数据 authMenus，筛选完整菜单 menus，得到一个权限菜单 filterMenus
        filterMenus() {
            return this.menus
                .map((item) => {
                    const authChild = item.children.filter((child) => {
                        return this.authMenus.includes(child.path);
                    });
                    // 返回一级菜单对象
                    return { ...item, children: authChild };
                })
                .filter((item) => item.children.length);
        },
    },
    methods: {
        ...mapActions(["getAuthMenusAsync"]),
    },
};

const routes = [
    // ...
    // {
    //  path: '/home',
    //  name: 'Home',  // 路由名称，可选
    //  component: HomeView
    // }
]

router.beforeEach(async (to, from, next) => {
    // 当用户进入的页面不是登录也不是注册
    if (!to.path.includes('login') && !to.path.includes('register')) {
        const token = localStorage.token;
        if (token) {
            // 发送请求验证 token 是否过期，如果 token 没有过期，就获取用户信息
            const res = await api.users.getUserInfo();
            if (res.code) {
                next();
                return;
            }
        }
        MessageBox.alert('你还未登录，请先登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
                next('/login');
            }
        });
        return;
    }
    // 代码执行到这，表示用户进入的页面是登录或注册页面
    next();
})

import HomeView from '../views/home/HomeView.vue'
import StudentsList from '../views/students/StudentsList.vue'
// ... 引入所有路由对应的组件

// 项目中完整的路由
const fullRoutes = [
    // ... 完整的路由对象的配置
]

const addRoutes = () => {

}

export default addRoutes;

import addRoutes from './addRoutes';
router.beforeEach(async (to, from, next) => {
    // 当用户进入的页面不是登录也不是注册
    if (!to.path.includes('login') && !to.path.includes('register')) {
        // ...
        if (token) {
            // 发送请求验证 token 是否过期，如果 token 没有过期，就获取用户信息
            const res = await api.users.getUserInfo();
            if (res.code) {
                store.commit('SET_USER_INFO', res.data); // 将用户信息保存到仓库
                next();
                addRoutes();   // 开始生成动态路由
                return;
            }
        }
        // ...
    }
    // ...
})

export default {
    // created() {
    //     this.getAuthMenusAsync();
    // },
    // methods: {
    //     ...mapActions(["getAuthMenusAsync"]),
    // },
}

const addRoutes = async () => {
    // 等待请求完成，并将数据保存到 state 中
    await store.dispatch('getAuthMenusAsync');

    router.addRoute({
        path: '/home',
        name: 'Home',
        component: HomeView,
        children: fullRoutes.filter(item => store.state.authMenus.includes(item.path))
    })
    router.addRoute({
        path: '*',
        name: 'NotFound',
        component: NotFound,
    })
}

const routes = [
 {
  path: '/home',
  name: 'Home',  // 路由名称，可选
  component: HomeView
 },
 {
  path: '/login',
  name: 'Login',  // 路由名称，可选
  component: LoginView
 },
 {
  path: '/register',
  name: 'Register',  // 路由名称，可选
  component: RegisterView
 }
]

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

import HomeView from '../views/home/HomeView.vue'
import LoginView from '../views/login/LoginView.vue'

const RegisterView = () => import('../views/register/RegisterView.vue');

const routes = [
    {
        path: '/home',
        name: 'Home',  // 路由名称，可选
        component: HomeView
    },
    {
        path: '/login',
        name: 'Login',  // 路由名称，可选
        component: LoginView
    },
    {
        path: '/register',
        name: 'Register',  // 路由名称，可选
        component: RegisterView
    }
]

const routes = [
    // 重定向
    {
        path: '/',
        redirect: '/home'
    },
    // .. 其他路由配置
]

const NotFound = () => import('../views/not-found/NotFound.vue')

const routes = [
    // ...其他路由配置
    // 404 页面
    {
        path: '*',
        name: 'NotFound',
        component: NotFound
    }
]

const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
})

const router = new VueRouter({
 routes
})

export default new Vuex.Store({
    state: {
        userInfo: { username: '张三' }
    }
})

<p>欢迎你，{{$store.state.userInfo.username}}</p>

<p>欢迎你，{{username}}</p>

<script>
export default {
    computed: {
        username() {
            return this.$store.state.userInfo.username;
        }
    }
}
</script>

export default new Vuex.Store({
    state: {
        userInfo: { username: '张三' }
    },
    mutations: {
        SET_USER_INFO(state, payload) {
            state.userInfo = payload;
        }
    }
})

this.$store.commit('SET_USER_INFO', { username: '李四' });

import store from '@/store';

store.commit('SET_USER_INFO', { username: '李四' });

export default new Vuex.Store({
    state: {
        userInfo: { username: '张三' }
    },
    getters: {
        username(state) {
            return state.userInfo.username;
        }
        // username: state => state.userInfo.username 简写
    }
})

<p>欢迎你，{{$store.getters.username}}</p>

<p>欢迎你，{{username}}</p>

<script>
export default {
    computed: {
        username() {
            return this.$store.getters.username;
        }
    }
}
</script>

<template>
    <div>
        <h1>生命周期函数</h1>
        <p>{{ msg }}</p>
        <button @click="msg = 'world'">更新</button>
        <button @click="$destroy()">销毁</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: "hello",
        };
    },
    beforeCreate() {
        console.log("beforeCreate 组件创建前", this.msg);
    },
    created() {
        console.log("created 组件创建完成", this.msg);
    },
    beforeMount() {
        console.log("beforeMount 组件挂载前");
    },
    mounted() {
        console.log("mounted 组件挂载完成");
    },
    beforeUpdate() {
        console.log("beforeUpdate 组件更新前");
    },
    updated() {
        console.log("updated 组件更新完成");
    },
    beforeDestroy() {
        console.log("beforeDestroy 组件销毁前");
    },
    destroyed() {
        console.log("beforeDestroy 组件销毁完成");
    },
};
</script>

router.beforeEach(async (to, from, next) => {
    // 当用户进入的页面不是登录也不是注册(例如进入首页)
    if (!to.path.includes('login') && !to.path.includes('register')) {
        // ....
    }
    // 判断用户是否想要进入登录页
    if (to.path.includes('login')) {
        const token = localStorage.token;
        // 如果有 token，判定为已登录，不让用户进入登录页面
        if (token) {
            next(false);  // 停留在当前页面
            return;
        }
    }
    next();
})

axios.interceptors.response.use((res) => {
    return res.data;
}, (err) => {
    if (err && err.response && err.response.status) {
        if (err.response.status === 401) {
            MessageBox.alert('登录已过期，请重新登录', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    localStorage.removeItem('token');  // 删除 token
                    router.replace('/login');
                }
            });
        }
    }
    return Promise.reject(err.message);
});

export default {
    methods: {
        logout() {
            localStorage.removeItem("token");
            this.$router.push("/login");
            // 刷新页面（重置路由、重置权限菜单的数据）
            location.reload();
        },
    }
}

const addRoutes = async () => {
    // 判断权限数据是否为空，为空的话才进入 if 请求权限数据、添加动态路由
    // 目的就是为了防止重复请求权限数据、重复添加动态路由
    if (store.state.authMenus.length === 0) {
        // 等待请求完成，并将数据保存到 state 中
        await store.dispatch('getAuthMenusAsync');
        router.addRoute({
            path: '/home',
            name: 'Home',
            component: HomeView,
            children: fullRoutes.filter(item => {
                return store.state.authMenus.includes(item.path);
            })
        })
        // 404 放到所有路由的最后
        router.addRoute({
            path: '*',
            name: 'NotFound',
            component: NotFound,
        })
    }
}

{
    path: 'studentsUpdate/:id',
    // ...
}

const addRoutes = async () => {
    // ....
    router.addRoute({
        path: '/home',
        name: 'Home',
        component: HomeView,
        children: fullRoutes.filter(item => {
            // item.path.split('/')[0] 获取动态路由路径的前半部分
            return store.state.authMenus.includes(item.path.split('/')[0]);
        })
    })
    // ...
}

<router-link to="/register">没有账号？去注册</router-link>

<router-link :to="{ path: '/register' }">没有账号？去注册</router-link>
<router-link :to="{ name: 'Register' }">没有账号？去注册</router-link>

export default {
    methods: {
        register() {
            alert("注册成功");

            this.$router.push("/login");

            this.$router.push({
                path: "/login",
            });

            this.$router.push({
                name: "Login",
            });
        },
    },
};

<router-link to="/home" replace>首页</router-link>
<router-link to="/home" :replace="true">首页</router-link>

export default {
    methods: {
        toHome() {
            this.$router.replace('/home');
        }
    }
};

this.$router.go(1);     // 前进一个页面
this.$router.go(-1);    // 回退一个页面
this.$router.go(0);     // 刷新当前页面
this.$router.forward(); // 前进一个页面
this.$router.back();    // 回退一个页面

export default new Vuex.Store({
    actions: {
        方法名(context, payload) {
            // 发送异步请求
        }
    }
})

this.$store.dispatch('getSubjectsAsync');

export default new Vuex.Store({
    state: {
        subjects: [],  // 专业数据的初始值
    },
    mutations: {
        SET_SUBJECTS(state, payload) {
            state.subjects = payload.rows;
        }
    },
    actions: {
        async getSubjectsAsync(context) {
            const res = await api.subjects.get();
            if (res.code) {
                context.commit('SET_SUBJECTS', res.data);
            }
        }
    }
})

import Vue from "vue";
const bus = new Vue();
export default bus;

import bus from "./bus.js";
export default {
    data() {
        return {
            num: "",
        };
    },
    mounted() {
        // 给事件总线身上添加一个事件(箭头函数默认不会执行)
        bus.$on("getData", (data) => {
            // console.log("组件B接收到其他组件传递的数据", data);
            this.num = data;
        });
    },
};

import bus from "./bus.js";
export default {
    data() {
        return {
            num: 1,
        };
    },
    methods: {
        postData() {
            // 调用事件总线身上的方法，同时传值
            bus.$emit('getData', this.num);
        },
    },
};

<script>
import Child from './components/Child.vue';
</script>

<script>
import Child from './components/Child.vue';
export default {
    components: {
        Child
    }
}
</script>

<template>
  <Child></Child>
</template>

import Vue from 'vue';

Vue.directive('指令名', {
    // 指令内容
});

export default {
    directives: {
        指令名: {
            // 指令内容
        }
    }
}

Vue.directive('指令名', {
    inserted(el, binding) {

    }
});

import store from "@/store";
import Vue from "vue";

Vue.directive('auth', {
    inserted(el, binding) {
        // 如果当前登录用户不是最高权限
        if (store.state.userInfo.auth != 2) {
            // el.remove();
            el.disabled = true;   // 有禁用功能
            el.classList.add('is-disabled');  // 有禁用样式
        }
    }
});

import './directives'

<el-button v-auth size="mini" type="danger" @click="handleDelete(scope.row)">
    删除
</el-button>

const routes = [
    {
        path: '/home',
        name: 'Home',
        component: HomeView,
        // 嵌套路由
        children: [
            {
                path: 'studentsList',  // 子路由的 path 不要以“/”开头
                name: 'StudentsList',
                component: StudentsList
            },
            {
                path: 'studentsAdd',
                name: 'StudentsAdd',
                component: StudentsAdd
            },
        ]
    },
]

<el-main>
    <router-view></router-view>
</el-main>

<router-link to="/home/studentsList">学生列表</router-link>

this.$router.push('/home/studentsList')