搜尋
首頁php框架Laravel分享laravel8+vue3.0+element-plus搭建方法

前言

分享laravel8+vue3.0+element-plus搭建方法前幾天突然發現出了 vue3.0 ,剛好閒來無事搭個試試。

開始

建立laravel8 專案
composer create-project laravel/laravel laravel8 --prefer-dist
laravel new laravel8
修改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"
  }
  1. 修改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')
  2. 新建router.js
    import Home from "./components/layouts/Home"export default [
      {path:'/',component: Home},]
  3. 新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>
  4. #新建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></style>
  5. app.scss 引入element-plus css檔案
    // Variables@import 'variables';// Bootstrap@import '~bootstrap/scss/bootstrap';// element-plus@import "~element-plus/lib/theme-chalk/index.css";
  6. 執行指令
    npm install && npm run dev
  7. 效果圖
  8. #控制台輸出為axios post 請求測試。
完畢!

以上是分享laravel8+vue3.0+element-plus搭建方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:learnku。如有侵權,請聯絡admin@php.cn刪除
Laravel(PHP)與Python:開發環境和生態系統Laravel(PHP)與Python:開發環境和生態系統Apr 12, 2025 am 12:10 AM

Laravel和Python在開發環境和生態系統上的對比如下:1.Laravel的開發環境簡單,僅需PHP和Composer,提供了豐富的擴展包如LaravelForge,但擴展包維護可能不及時。 2.Python的開發環境也簡單,僅需Python和pip,生態系統龐大,涵蓋多個領域,但版本和依賴管理可能複雜。

Laravel和後端:為Web應用程序提供動力邏輯Laravel和後端:為Web應用程序提供動力邏輯Apr 11, 2025 am 11:29 AM

Laravel是如何在後端邏輯中發揮作用的?它通過路由系統、EloquentORM、認證與授權、事件與監聽器以及性能優化來簡化和增強後端開發。 1.路由系統允許定義URL結構和請求處理邏輯。 2.EloquentORM簡化數據庫交互。 3.認證與授權系統便於用戶管理。 4.事件與監聽器實現松耦合代碼結構。 5.性能優化通過緩存和隊列提高應用效率。

為什麼Laravel如此受歡迎?為什麼Laravel如此受歡迎?Apr 02, 2025 pm 02:16 PM

Laravel受歡迎的原因包括其簡化開發過程、提供愉快的開發環境和豐富的功能。 1)它吸收了RubyonRails的設計理念,結合PHP的靈活性。 2)提供瞭如EloquentORM、Blade模板引擎等工具,提高開發效率。 3)其MVC架構和依賴注入機制使代碼更加模塊化和可測試。 4)提供了強大的調試工具和性能優化方法,如緩存系統和最佳實踐。

django或laravel哪個更好?django或laravel哪個更好?Mar 28, 2025 am 10:41 AM

Django和Laravel都是全棧框架,Django適合Python開發者和復雜業務邏輯,Laravel適合PHP開發者和優雅語法。 1.Django基於Python,遵循“電池齊全”哲學,適合快速開發和高並發。 2.Laravel基於PHP,強調開發者體驗,適合小型到中型項目。

哪個是更好的PHP或Laravel?哪個是更好的PHP或Laravel?Mar 27, 2025 pm 05:31 PM

PHP和Laravel不是直接可比的,因為Laravel是基於PHP的框架。 1.PHP適合小型項目或快速原型開發,因其簡單直接。 2.Laravel適合大型項目或高效開發,因其提供豐富功能和工具,但學習曲線較陡,性能可能不如純PHP。

Laravel是前端還是後端?Laravel是前端還是後端?Mar 27, 2025 pm 05:31 PM

laravelisabackendframeworkbuiltonphp,設計ForweBapplicationDevelopment.itfocusessonserver-sideLogic,databasemagemention和Applicationstructure和CanBeintegratedWithFrontendTechnologiesLikeLikeVue.jsorreActeReacterVue.jsorreActforforfull-stackDevefloct。

如何在Laravel中創建和使用自定義刀片指令?如何在Laravel中創建和使用自定義刀片指令?Mar 17, 2025 pm 02:50 PM

本文討論了Laravel中的創建和使用自定義刀片指令以增強模板。它涵蓋了定義指令,在模板中使用它們,並在大型項目中管理它們,強調了改進的代碼可重複性和R等好處

如何使用Laravel的組件來創建可重複使用的UI元素?如何使用Laravel的組件來創建可重複使用的UI元素?Mar 17, 2025 pm 02:47 PM

本文討論了使用組件在Laravel中創建和自定義可重複使用的UI元素,從而為組織提供最佳實踐並建議增強包裝。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。