Home > Developer > JavaScript
Laravel5.4 + vue + element simple example code, laravel5.4vue
Now laravel comes to version 5.4, making vue more convenient. The specific steps are as follows:
1. Download laravel5.4. Here is (the configuration files 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
{ "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" } }
You can see the modified information clearly.
The lodash version is changed to ^ 4.17.4. Otherwise, compilation will fail. Pay attention to the red font.
The mix of laravel5.4 is quite useful. Let's take a look. This is the address.
3. Run cnpm install in the root directory
Note that cnpm, especially for windows users. Otherwise, an error will be reported.
4. Modify resources/assets/js/bootstrap. js.
More than 30 rows have
Copy codeThe Code is as follows:
Window. axios. defaults. headers. common = {'x-CSRF-TOKEN ':..., 'x-Requested-with': 'xmlhttprequest '};
Change the 'X-CSRF-TOKEN 'item
Copy codeThe 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
Here is a simple test. element is not introduced.
/** * 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. Modify resources/views/welcome. blade. php
<!DOCTYPE html>Run npm run watch
This is a simple setup.
The second method does not use mix.
File moved for me
1. Download laravel5.4
2. Command Line (in the laravel5.4 directory): composer install
3. Create a New. env file and copy the content in. env. example to the. env file.
4. generate the key. Command Line: PHP artisan key: generate
5. The configuration file package. json contains the following content:
{ "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 an App. vue file under resources/assets/js with the following content:
<template> <div id="app"> <router-view></router-view> </div> </template>8. resources/assets/js/app. js
/** * 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 './App.vue' import VueRouter from 'vue-router' import ElementUI from 'element-ui' import 'element-ui/lib/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. Change resources/view/welcome. blade. php:
<!DOCTYPE html>10. Create the 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 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, 'node_modules'), }, module: { loaders: [ { test: /\.css$/, loader: 'style!css' } ] } }); mix.sass('app.scss') .webpack('app.js') });11. Command Line (without gulp, download it yourself ):
gulp watchIn this way, the simple setup is complete and you can access it!
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
