Share laravel8+vue3.0+element-plus construction method

The following tutorial column will introduce and share the laravel8 vue3.0 element-plus building method from thelaraveltutorial column. I hope it will be helpful to friends in need!

Preface

I suddenly discovered vue3.0 a few days ago, so I just had time to give it a try.

Start

1. Create laravel8 project

   composer create-project laravel/laravel laravel8 --prefer-dist

   Copy after login
   or

   laravel new laravel8

   Copy after login
2. Install laravel/ui

   composer require laravel/ui

   Copy after login
   and run

   php artisan ui vue

   Copy after login
   in the root directory
3. Modify package.json file

   "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" }

   Copy after login
4. Modify app.js file

   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')

   Copy after login
5. New router.js

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

   Copy after login
6. New App.vue (element-plus official document example)

   Copy after login
7. New Home.vuerrree
8. app.scss Introduce element-plus css file

   Copy after login
9. Run command

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

   Copy after login
10. Rendering

The console output is axios post request test.

complete!

The above is the detailed content of Share laravel8+vue3.0+element-plus construction method. For more information, please follow other related articles on the PHP Chinese website!