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