前端依赖

axios

http://axios-js.com/zh-cn/docs/vue-axios.html

npm install --save axios vue-axios

vite

npm install --save vite

pain

https://pinia.web3doc.top/getting-started.html

npm install pinia

import {defineStore} from "pinia";

export const useUserStore = defineStore("userStore", {
    state: () => {
        return {
            auth: false,
            user: {
                name: "orangbus",
                phone: "159000041"
            },
        }
    },
    actions: {
        getUserInfo() {

        }
    },
    getters: {
        getUser: (state) => {
            return state.user;
        }
    }
})


export const useWebsiteStore = defineStore("websiteStore", {
    state: () => {
        return {
            website: {
                name: "仿真实验官网",
                url: "http://localhost"
            }
        }

    }
})

import {storeToRefs} from "pinia"
import {useUserStore} from "@/store/index"
const userStore = useUserStore();
let {auth,user} = storeToRefs(userStore)
console.log(auth.value,user.value);

vue-route

https://router.vuejs.org/zh/installation.html

npm install vue-router@4

基本配置

const = routes = [
    {
		path:"/",
		name: "index",
		component:()=>import("../components/index/index.vue"),
		meta:{
			keepAlive: true,
			required: false,
			transition: 'slide-left' // 动画效果
		}
	},
];

const router = createRouter({
	history:createWebHistory(),
	routes,
	// scrollBehavior(to,from,savePosition){
	// 	return savePosition ? savePosition : {top:0};
	// }
});

router.beforeEach(async (to,from,next)=>{
	const token = LocalStorage.get(EnumData.tokenLabel);
	if (to.meta.required && token === null){
		if (to.name != "login"){
			next({
				path:"/login"
			});
		}
	}
	next();
})

组件缓存

<script>
import { defineComponent } from "vue";
import LocalStorage from "./utils/LocalStorage.js";
import EnumData from "./utils/EnumData.js";
export default defineComponent({
    name: "App",
    computed:{
        cachedViews(){
            return this.$router.options.routes
                .filter((route) =>{
                    route.meta && route.meta.keepalive
                })
                .map((route)=>route.name)
        }
    },
    // 用户关闭窗口的时候执行
    beforeUnmount() {
        window.removeEventListener("beforeunload",this.clearCache);
    },
    methods:{
        clearCache(){
            LocalStorage.remove(EnumData.websiteLabel);
            LocalStorage.remove(EnumData.friendLabel);
        }
    }
})
</script>

<template>
    <router-view v-slot="{Component,route}">
        <keep-alive :include="cachedViews.includes(route.name)">
            <Component :is="Component"></Component>
        </keep-alive>
    </router-view>
</template>

前端UI组件

vuetify

yarn add vuetify@^3.3.2

配置

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

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

图标

npm install @mdi/font

import "@mdi/font/css/materialdesignicons.min.css";

消息提示

yarn add vue-toastification@next

import Toast from "vue-toastification"
import "vue-toastification/dist/index.css"
const options = {
	position: "bottom-center",
	timeout: 1500,
	closeOnClick: true,
	pauseOnFocusLoss: false,
	pauseOnHover: true,
	draggable: true,
	draggablePercent: 0.6,
	showCloseButtonOnHover: false,
	hideProgressBar: false,
	closeButton: "button",
	icon: true,
	rtl: false,
};

.use(Toast,options)

消息提示

import {useToast} from "vue-toastification"

const toast = useToast();

let snackbar = {
	msg: (msg = "") => {
		return toast(msg);
	},
	success: (msg = "success") => {
		return toast(msg);
	},
	info: (msg = "提示") => {
		return toast.info(msg);
	},
	warning: (msg = "警告") => {
		return toast.warning(msg);
	},
	error: (msg = "error") => {
		return toast.error(msg);
	},
	resultMsg(code = 200,msg="success") {
		return code === 200 ? toast(msg) : toast.error(msg);
	}
}

export default snackbar;

滚动条美化

.main {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.main::-webkit-scrollbar {
  width: 10px;
  height: 30px;
}
.main::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.main::-webkit-scrollbar-thumb {
  background: #a3a1a1;
  border-radius: 10px;
}

后端依赖

目录结构

基于laravel的目录结构配置

cd /resources/js &&
mkdir -p api router plugin store utils