創建 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
”)
