搜尋
首頁後端開發php教程laravel5.4+vue+element實作簡單搭建的實例

laravel5.4+vue+element實作簡單搭建的實例

黄舟
黄舟
Sep 09, 2017 am 10:18 AM
實例搭建

本篇文章主要介紹了laravel5.4+vue+element簡單搭建的範例程式碼，具有一定的參考價值，有興趣的夥伴們可以參考一下

如今laravel來到5.4版本，更方便引入vue了，具體步驟如下：

1.下載laravel5.4,這邊是下載地址（裡面的設定檔都寫得差不多了）！

2.開啟package.json

內容如下 


{ 
 "private": true, 
 "scripts": { 
  "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
  "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
  "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 
  "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 
 }, 
 "devDependencies": { 
  "axios": "^0.15.2", 
  "bootstrap-sass": "^3.3.7", 
  "jquery": "^3.1.0", 
  "laravel-mix": "^0.6.0", 
  "lodash": "^4.16.2", 
  "vue": "^2.0.1" 
 } 
}

修改一下


{ 
 "private": true, 
 "scripts": { 
  "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
  "watch": "cross-en NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
  "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 
  "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 
 }, 
 "devDependencies": { 
  "axios": "^0.15.3", 
  "bootstrap-sass": "^3.3.7", 
  "jquery": "^3.1.1", 
  "laravel-mix": "^0.8.3", 
  "cross-env": "^3.2.3", 
  "lodash": "^4.17.4", 
  "vue": "^2.1.10", 
  "element-ui": "^1.2.8", 
  "vue-loader": "^11.3.4", 
  "vue-router": "^2.4.0" 
 } 
}

修改的地方看清楚哦

#lodash的版本改為^4.17.4，否則編譯會出錯，請注意紅色字體

laravel5.4的mix還蠻好用，建議大家去看一下，這是位址

3.在根目錄運行cnpm install

注意是cnpm，尤其是windows用戶，不然將會報錯

4.然後修改resources/assets/js/bootstrap.js

30多行有

 程式碼如下:

window.axios.defaults.headers.common = {    'X-CSRF-TOKEN': .......，    'X-Requested-With': 'XMLHttpRequest'};

把'X-CSRF-TOKEN'這一項改為

#程式碼如下:

'X-CSRF-TOKEN': document.querySelector('meta[name="X-CSRF-TOKEN"]').content,

否則，不能成功取得csrf

5.修改resources/assets/js/app.js

這裡簡單測試一下，並沒有引入element


/** 
 * First we will load all of this project's JavaScript dependencies which 
 * includes Vue and other libraries. It is a great starting point when 
 * building robust, powerful web applications using Vue and Laravel. 
 */ 
 
require('./bootstrap'); 
 
/** 
 * Next, we will create a fresh Vue application instance and attach it to 
 * the page. Then, you may begin adding components to this application 
 * or customize the JavaScript scaffolding to fit your unique needs. 
 */ 
 
import App from "./components/Example.vue" 
 
const app = new Vue({ 
  el: '#app', 
  render: h => h(App) 
});

6.修改resources/views/welcome.blade.php


<!DOCTYPE html> 
<html lang="{{ config(&#39;app.locale&#39;) }}"> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <meta name="X-CSRF-TOKEN" content="{{csrf_token()}}"> 
  <title>123</title> 
</head> 
<body> 
<p id="app"></p> 
 
<script src="{{ mix(&#39;js/app.js&#39;) }}"></script> 
</body> 
</html>

然後執行npm run watch

這就簡單搭建成功了

第二種方法，沒有用到mix

下圖為我動到的檔案

1.下載laravel5.4

#2.命令列（laravel5.4目錄下）：composer install

#3.新建.env文件，把.env.example裡的內容複製到.env檔中

4.產生key，指令列：PHP artisan key:generate

5.設定檔package.json，內容如下：


{ 
 "private": true, 
 "scripts": { 
  "prod": "gulp --production", 
  "dev": "gulp watch" 
 }, 
 "devDependencies": { 
  "babel-core": "^6.20.0", 
  "babel-loader": "^6.2.9", 
  "css-loader": "^0.25.0", 
  "element-ui": "^1.1.1", 
  "gulp": "^3.9.1", 
  "handsontable": "0.27.0", 
  "laravel-elixir": "^6.0.0-15", 
  "laravel-elixir-vue-2": "^0.2.0", 
  "laravel-elixir-webpack-official": "^1.0.10", 
  "style-loader": "^0.13.1", 
  "vue": "^2.1.4", 
  "vue-loader": "^10.0.0", 
  "vue-resource": "^1.0.3", 
  "vue-router": "^2.1.1", 
  "vue-template-compiler": "^2.1.4", 
  "axios": "^0.15.2", 
  "bootstrap-sass": "^3.3.7", 
  "jquery": "^3.1.0", 
  "laravel-mix": "^0.5.0", 
  "lodash": "^4.16.2" 
 }, 
 "dependencies": {} 
}

6.命令列（沒有npm的自行下載）：npm install

7.resources/assets/js下新建App.vue文件，內容如下：


<template> 
 <p id="app"> 
  <router-view></router-view> 
 </p> 
</template>

8.resources/assets/js/app. js

/** 
 * First we will load all of this project&#39;s JavaScript dependencies which 
 * includes Vue and other libraries. It is a great starting point when 
 * building robust, powerful web applications using Vue and Laravel. 
 */ 
 
require(&#39;./bootstrap&#39;); 
/** 
 * Next, we will create a fresh Vue application instance and attach it to 
 * the page. Then, you may begin adding components to this application 
 * or customize the JavaScript scaffolding to fit your unique needs. 
 */ 
import App from &#39;./App.vue&#39; 
import VueRouter from &#39;vue-router&#39; 
import ElementUI from &#39;element-ui&#39; 
import &#39;element-ui/lib/theme-default/index.css&#39; 
 
Vue.use(VueRouter) 
Vue.use(ElementUI) 
 
 
const router = new VueRouter({ 
 routes: [ 
  { path: &#39;/&#39;, component: require(&#39;./components/Example.vue&#39;) } 
 ] 
}) 
 
const app = new Vue({ 
  el: &#39;#app&#39;, 
  router, 
  template: &#39;<App/>&#39;, 
  components: { App } 
});

9.把resources/view/welcome.blade.php改為：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Hello</title> 
</head> 
<body> 
<p id="app"></p> 
 
<script src="{{ asset(&#39;js/app.js&#39;) }}"></script> 
</body> 
</html>

10.在主目錄下新建gulpfile.js文件，內容：


const elixir = require(&#39;laravel-elixir&#39;); 
const path = require(&#39;path&#39;); 
 
require(&#39;laravel-elixir-vue-2&#39;); 
/* 
 |-------------------------------------------------------------------------- 
 | Elixir Asset Management 
 |-------------------------------------------------------------------------- 
 | 
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks 
 | for your Laravel application. By default, we are compiling the Sass 
 | file for our application, as well as publishing vendor resources. 
 | 
 */ 
 
elixir(mix => { 
  // Elixir.webpack.config.module.loaders = []; 
 
  Elixir.webpack.mergeConfig({ 
    resolveLoader: { 
      root: path.join(__dirname, &#39;node_modules&#39;), 
    }, 
    module: { 
      loaders: [ 
        { 
          test: /\.css$/, 
          loader: &#39;style!css&#39; 
        } 
      ] 
    } 
  }); 
 
  mix.sass(&#39;app.scss&#39;) 
    .webpack(&#39;app.js&#39;) 
});

11.命令列（沒有gulp,自行下載）：gulp watch

這樣就簡單的搭建完成了，可以訪問了！

以上是laravel5.4+vue+element實作簡單搭建的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
可以在PHP會話中存儲哪些數據？可以在PHP會話中存儲哪些數據？May 02, 2025 am 12:17 AM

phpsessionscanStorestrings，數字，數組和原始物。

您如何開始PHP會話？您如何開始PHP會話？May 02, 2025 am 12:16 AM

tostartaphpsession，usesesses_start（）attheScript'Sbeginning.1）placeitbeforeanyOutputtosetThesessionCookie.2）useSessionsforuserDatalikeloginstatusorshoppingcarts.3）regenerateSessiveIdStopreventFentfixationAttacks.s.4）考慮使用AttActAcks.s.s.4）

什麼是會話再生，如何提高安全性？什麼是會話再生，如何提高安全性？May 02, 2025 am 12:15 AM

會話再生是指在用戶進行敏感操作時生成新會話ID並使舊ID失效，以防會話固定攻擊。實現步驟包括：1.檢測敏感操作，2.生成新會話ID，3.銷毀舊會話ID，4.更新用戶端會話信息。

使用PHP會話時有哪些性能考慮？使用PHP會話時有哪些性能考慮？May 02, 2025 am 12:11 AM

PHP会话对应用性能有显著影响。优化方法包括：1.使用数据库存储会话数据，提升响应速度；2.减少会话数据使用，只存储必要信息；3.采用非阻塞会话处理器，提高并发能力；4.调整会话过期时间，平衡用户体验和服务器负担；5.使用持久会话，减少数据读写次数。

PHP會話與Cookie有何不同？PHP會話與Cookie有何不同？May 02, 2025 am 12:03 AM

PHPsessionsareserver-side,whilecookiesareclient-side.1)Sessionsstoredataontheserver,aremoresecure,andhandlelargerdata.2)Cookiesstoredataontheclient,arelesssecure,andlimitedinsize.Usesessionsforsensitivedataandcookiesfornon-sensitive,client-sidedata.

PHP如何識別用戶的會話？PHP如何識別用戶的會話？May 01, 2025 am 12:23 AM

phpIdentifiesauser'ssessionSessionSessionCookiesAndSessionId.1）whiwsession_start（）被稱為，phpgeneratesainiquesesesessionIdStoredInacookInAcookInAcienamedInAcienamedphpsessIdontheuser'sbrowser'sbrowser.2）thisIdallowSphptpptpptpptpptpptpptpptoretoreteretrieetrieetrieetrieetrieetrieetreetrieetrieetrieetrieetremthafromtheserver。

確保PHP會議的一些最佳實踐是什麼？確保PHP會議的一些最佳實踐是什麼？May 01, 2025 am 12:22 AM

PHP會話的安全可以通過以下措施實現：1.使用session_regenerate_id()在用戶登錄或重要操作時重新生成會話ID。 2.通過HTTPS協議加密傳輸會話ID。 3.使用session_save_path()指定安全目錄存儲會話數據，並正確設置權限。

PHP會話文件默認存儲在哪裡？PHP會話文件默認存儲在哪裡？May 01, 2025 am 12:15 AM

phpsessionFilesArestoredIntheDirectorySpecifiedBysession.save_path，通常是/tmponunix-likesystemsorc：\ windows \ windows \ temponwindows.tocustomizethis：tocustomizEthis：1）useession_save_save_save_path_path（）

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
4 週前ByDDD
如何修復KB5055523無法在Windows 11中安裝？
3 週前ByDDD
Inzoi：如何申請學校和大學
1 個月前ByDDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前ByDDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前ByDDD
顯示更多

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

EditPlus 中文破解版

EditPlus 中文破解版

體積小，語法高亮，不支援程式碼提示功能

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7906
15
Java教學
1652
14
CakePHP 教程
1411
52
Laravel 教程
1303
25
PHP教程
1248
29
顯示更多