小编给大家分享一下laravel8+vue3.0+element-plus的搭建方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创建 laravel8 项目
计算
安全
数据库
网络和加速
企业服务
composer create-project laravel/laravel laravel8 --prefer-dist或
laravel new laravel8安装 laravel/ui
composer require laravel/ui
根目录下运行
php artisan ui vue
修改 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"
}修改 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'const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,})import RootComponent from "./components/layouts/App"const app = Vue.createApp(RootComponent)app.config.globalProperties.$http=axios
app.use(router)
.use(ElementPlus);app.mount('#app')新建 router.js
import Home from "./components/layouts/Home"export default [
{path:'/',component: Home},]新建 App.vue （element-plus 官方文档例子）
<template>
<el-container>
<el-header>Header</el-header>
<el-main><router-view></router-view></el-main>
<el-footer>Footer</el-footer>
</el-container></template><script>export default {}</script><style>.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;}.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";运行命令
npm install && npm run dev
以上是“laravel8+vue3.0+element-plus的搭建方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
