laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目

composer create-project --prefer-dist laravel/laravel laravel8 '8.*'

安装 laravel/ui

composer require laravel/ui

修改 package.json 文件

"devDependencies": {"@vue/compiler-sfc": "^3.0.7","axios": "^0.21","bootstrap": "^4.0.0","jquery": "^3.2","laravel-mix": "^6.0.6","lodash": "^4.17.19","popper.js": "^1.12","postcss": "^8.1.14","resolve-url-loader": "^3.1.2","sass": "^1.20.1","sass-loader": "^8.0.0","vue": "^3.0.7","vue-loader": "^16.1.0","vue-template-compiler": "^2.6.10"},"dependencies": {"element-plus": "^1.0.2-beta.35","vue-router": "^4.0.5"}

目录文件结构

/resources/js/app.js
/resources/js/bootstrap.js
/resources/js/router.js
/resources/js/components/layouts
/resources/js/components/layouts/App.vue
/resources/js/components/layouts/Home.vue

修改 app.js 文件

require('./bootstrap');window.Vue = require('vue');
window.VueRouter = require('vue-router');import routes from "./router"
import axios from "axios"
import ElementPlus from 'element-plus'
import RootComponent from "./components/layouts/App"const router = VueRouter.createRouter({history: VueRouter.createWebHashHistory(),routes,
})const app = Vue.createApp(RootComponent)
app.config.globalProperties.$http = axios;
app.use(router);
app.use(ElementPlus);
app.mount('#app')

新建 router.js

import Home from "./components/layouts/Home"
export default [{path: '/',component: Home},]

新建 App.vue

<template><el-container><el-header>Header</el-header><el-main><router-view /></el-main><el-footer>Footer</el-footer></el-container>
</template><script>
export default {}
</script><style>
.el-header, .el-footer {color: #333;text-align: center;line-height: 60px;background-color: #B3C0D1;
}
.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;
}
.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;
}
body > .el-container {margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;
}
.el-container:nth-child(7) .el-aside {line-height: 320px;
}
</style>

新建 Home.vue

<template><p>home</p>
</template><script>
export default {methods:{cs(){axios.post("../index").then(function (response){console.log(response);}).catch(function (error){console.log(error);})}},mounted() {this.cs();}
}
</script><style scoped></style>

app.scss 引入 element-plus css文件

// Variables@import 'variables';
// Bootstrap@import '~bootstrap/scss/bootstrap';
// element-plus@import "~element-plus/lib/theme-chalk/index.css";

运行命令

yarn install
yarn dev

启动php

php artisan serve