laravel-vue3 开发
大约 2 分钟
前端依赖
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