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

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

Copy after login

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

Copy after login

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

Copy after login

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,

Copy after login

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) 
});

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

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 } 
});

Copy after login

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>

Copy after login

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;) 
});

Copy after login

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!