Laravel5.4+vue+element implementation of simple construction examples

This article mainly introduces the laravel5.4+vue+element simple construction of the sample code, with a certain reference value, interested in small partners can refer to

Now Laravel came to the 5.4 version, more convenient to introduce Vue, the following steps:

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

2. Open Package.json

The contents are 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

{"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 "," Jque Ry ":" ^3.1.1 "," Laravel-mix ":" ^0.8.3 "," cross-env ":" ^3.2.3 "," Lodash ":" ^4.17.4 "," Vue ":" ^2.1.10 "," element-u I ":" ^1.2.8 "," Vue-loader ":" ^11.3.4 "," Vue-router ":" ^2.4.0 "}}

Change the place to see clearly OH

Lodash version changed to ^4.17.4, otherwise the compilation will be wrong, please note the Red font

laravel5.4 mix is very useful, we suggest you go to see, this is the address

3. Run cnpm install in the root directory

Note that cnpm, especially Windows users, will be error-

4. Then modify the Resources/assets/js/bootstrap.js

More than 30 lines have

The code is as follows:

Window.axios.defaults.headers.common = {    ' X-csrf-token ': ...,    ' x-requested-with ': ' XMLHttpRequest '};

Change the term ' x-csrf-token ' to

The code is as follows:

' X-csrf-token ': document.queryselector (' meta[name= ' X-csrf-token "]). Content,

Otherwise, the CSRF cannot be obtained successfully

5. Modify Resources/assets/js/app.js

This is a simple test and does not introduce element

/** * First we'll load all the This  project's JavaScript dependencies which  * includes Vue and other libraries. I T is a great starting point when  * building robust, powerful Web applications using Vue and Laravel.  *  /require ('./bootstrap ');  /**  * Next, we'll create a fresh Vue application instance and attach it to  * the page.  Then, your may begin adding the 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. Modify Resources/views/welcome.blade.php

<! DOCTYPE html> 
Then run NPM Run watch

It's a simple setup.

The second way, there is no use of mix

The file that I moved to


1. Download laravel5.4

2. Command line (laravel5.4 directory): Composer install

3. Create a new. env file, copy the contents of the. env file into the. env.example

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

5. configuration file Package.json, which reads 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 (self-download without NPM): NPM Install

7.RESOURCES/ASSETS/JS Create a new App.vue file with the following contents:



<template>  <p id= "app" >   <router-view></router-view>  </p> </template >
8.resources/assets/js/app.js

/** * First we'll load all the This  project's JavaScript dependencies which  * includes Vue and other libraries. I T is a great starting point when  * building robust, powerful Web applications using Vue and Laravel.  *  /require ('./bootstrap ');/**  * Next, we'll create a fresh Vue application instance and attach it to  * the Page.  Then, your may begin adding the application  * or customize the JavaScript scaffolding to fit your unique needs.  */import App from './app.vue ' import vuerouter from ' vue-router ' import elementui from ' element-ui ' import ' element-ui/li B/theme-default/index.css '  vue.use (vuerouter) vue.use (elementui)   Const ROUTER = new Vuerouter ({  Routes: [   {path: '/', Component:require ('./components/example.vue ')}  ]})  Const APP = new Vue ({   el : ' #app ',   router,   Template: ' <App/> ', components   : {app}});
9. Replace the resources/view/welcome.blade.php with the following:

<! DOCTYPE html> 
10. Create a new Gulpfile.js file in the main directory, content:



CONST ELIXIR = require (' Laravel-elixir '); Const PATH = require (' path ');  Require (' laravel-elixir-vue-2 '); /*  |--------------------------------------------------------------------------  | Elixir Asset Management  |--------------------------------------------------------------------------  |  | Elixir provides a clean, fluent API for defining some basic Gulp tasks  | For your Laravel application. By default, we is 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, ' node_modules '),     },     Module: {       loaders: [         {           test:/\.css$/,           loader: ' Style!css '         }       ]     }   );    Mix.sass (' App.scss ')     . Webpack (' App.js ')});
11. Command line (no gulp, download by yourself):gulp watch

 This simple build is complete, can be accessed!