laravel5.4+vue+element implements simple construction examples-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

laravel5.4+vue+element implements simple construction examples

黄舟

Sep 09, 2017 am 10:18 AM

Examplebuild

This article mainly introduces the sample code of simple construction of laravel5.4+vue+element, which has certain reference value. Interested friends can refer to it

Now laravel has come to version 5.4. It is more convenient to introduce vue. The specific steps are as follows:

1. Download laravel5.4, here is the download address (the configuration files inside are almost written)!

2. Open package.json

The content is as follows

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

Modify it

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

Please read clearly the modifications

The version of lodash is changed to ^4.17.4, otherwise the compilation will be wrong, please pay attention to the red font

The mix of laravel5.4 is very easy to use. I suggest you take a look. This is the address

3. Run cnpm install

in the root directory.

Note that it is cnpm, especially for Windows users, otherwise an error will be reported

4. Then modify resources/assets/js/bootstrap.js

30+ lines There are

The code is as follows:

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

Change the 'X-CSRF-TOKEN' item to

The code is as follows:

&#39;X-CSRF-TOKEN&#39;: document.querySelector(&#39;meta[name="X-CSRF-TOKEN"]&#39;).content,

Otherwise, the csrf cannot be obtained successfully

5. Modify resources/assets/js/app.js

A simple test here, element
is not introduced

/** 
 * 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 "./components/Example.vue" 
 
const app = new Vue({ 
  el: &#39;#app&#39;, 
  render: h => h(App) 
});

6. Modify 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>

and then run npm run watch

This is a simple and successful setup

The second method does not use mix

The picture below shows the file I moved

1. Download laravel5.4

2. Command line (under the laravel5.4 directory): composer install

3. Create a new .env file and copy the contents of .env.example to the .env file

4. Generate key, command line: PHP artisan key:generate

5. Configuration file package.json, the content is as follows:

{ 
 "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. Command line (download without npm): npm install

7. Create a new App.vue file under .resources/assets/js with the following content:

<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. Change resources/view/welcome.blade.php to:

<!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. Create a new gulpfile.js file in the main directory, content:

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. Command line (without gulp, download it yourself): gulp watch

The simple construction is completed. Now accessible!

The above is the detailed content of laravel5.4+vue+element implements simple construction examples. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What data can be stored in a PHP session?May 02, 2025 am 12:17 AM

PHPsessionscanstorestrings,numbers,arrays,andobjects.1.Strings:textdatalikeusernames.2.Numbers:integersorfloatsforcounters.3.Arrays:listslikeshoppingcarts.4.Objects:complexstructuresthatareserialized.

How do you start a PHP session?May 02, 2025 am 12:16 AM

TostartaPHPsession,usesession_start()atthescript'sbeginning.1)Placeitbeforeanyoutputtosetthesessioncookie.2)Usesessionsforuserdatalikeloginstatusorshoppingcarts.3)RegeneratesessionIDstopreventfixationattacks.4)Considerusingadatabaseforsessionstoragei

What is session regeneration, and how does it improve security?May 02, 2025 am 12:15 AM

Session regeneration refers to generating a new session ID and invalidating the old ID when the user performs sensitive operations in case of session fixed attacks. The implementation steps include: 1. Detect sensitive operations, 2. Generate new session ID, 3. Destroy old session ID, 4. Update user-side session information.

What are some performance considerations when using PHP sessions?May 02, 2025 am 12:11 AM

PHP sessions have a significant impact on application performance. Optimization methods include: 1. Use a database to store session data to improve response speed; 2. Reduce the use of session data and only store necessary information; 3. Use a non-blocking session processor to improve concurrency capabilities; 4. Adjust the session expiration time to balance user experience and server burden; 5. Use persistent sessions to reduce the number of data read and write times.

How do PHP sessions differ from cookies?May 02, 2025 am 12:03 AM

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

How does PHP identify a user's session?May 01, 2025 am 12:23 AM

PHPidentifiesauser'ssessionusingsessioncookiesandsessionIDs.1)Whensession_start()iscalled,PHPgeneratesauniquesessionIDstoredinacookienamedPHPSESSIDontheuser'sbrowser.2)ThisIDallowsPHPtoretrievesessiondatafromtheserver.

What are some best practices for securing PHP sessions?May 01, 2025 am 12:22 AM

The security of PHP sessions can be achieved through the following measures: 1. Use session_regenerate_id() to regenerate the session ID when the user logs in or is an important operation. 2. Encrypt the transmission session ID through the HTTPS protocol. 3. Use session_save_path() to specify the secure directory to store session data and set permissions correctly.

Where are PHP session files stored by default?May 01, 2025 am 12:15 AM

PHPsessionfilesarestoredinthedirectoryspecifiedbysession.save_path,typically/tmponUnix-likesystemsorC:\Windows\TemponWindows.Tocustomizethis:1)Usesession_save_path()tosetacustomdirectory,ensuringit'swritable;2)Verifythecustomdirectoryexistsandiswrita

See all articles