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
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 = { 'X-CSRF-TOKEN': .......， 'X-Requested-With': 'XMLHttpRequest'};Change the 'X-CSRF-TOKEN' item 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
A simple test here, 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>
<html lang="{{ config('app.locale') }}">
<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('js/app.js') }}"></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'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 to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<p id="app"></p>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</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 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 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!
Python中的SVM实例Jun 11, 2023 pm 08:42 PMPython中的支持向量机（SupportVectorMachine，SVM）是一个强大的有监督学习算法，可以用来解决分类和回归问题。SVM在处理高维度数据和非线性问题的时候表现出色，被广泛地应用于数据挖掘、图像分类、文本分类、生物信息学等领域。在本文中，我们将介绍在Python中使用SVM进行分类的实例。我们将使用scikit-learn库中的SVM模
学习Golang指针转换的最佳实践示例Feb 24, 2024 pm 03:51 PMGolang是一门功能强大且高效的编程语言，可以用于开发各种应用程序和服务。在Golang中，指针是一种非常重要的概念，它可以帮助我们更灵活和高效地操作数据。指针转换是指在不同类型之间进行指针操作的过程，本文将通过具体的实例来学习Golang中指针转换的最佳实践。1.基本概念在Golang中，每个变量都有一个地址，地址就是变量在内存中的位置。
Gin框架中的验证码使用实例Jun 23, 2023 am 08:10 AM随着互联网的普及，验证码已经成为了登录、注册、找回密码等操作的必要流程。在Gin框架中，实现验证码功能也变得异常简单。本文将介绍如何在Gin框架中使用第三方库实现验证码功能，并提供示例代码供读者参考。一、安装依赖库在使用验证码之前，我们需要安装一个第三方库goCaptcha。安装goCaptcha可以使用goget命令：$goget-ugithub
VUE3入门实例：制作一个简单的视频播放器Jun 15, 2023 pm 09:42 PM随着新一代前端框架的不断涌现，VUE3作为一个快速、灵活、易上手的前端框架备受热爱。接下来，我们就来一起学习VUE3的基础知识，制作一个简单的视频播放器。一、安装VUE3首先，我们需要在本地安装VUE3。打开命令行工具，执行以下命令:npminstallvue@next接着，新建一个HTML文件，引入VUE3：<!doctypehtml>
Python中的VAE算法实例Jun 11, 2023 pm 07:58 PMVAE是一种生成模型，全称是VariationalAutoencoder，中文译作变分自编码器。它是一种无监督的学习算法，可以用来生成新的数据，比如图像、音频、文本等。与普通的自编码器相比，VAE更加灵活和强大，能够生成更加复杂和真实的数据。Python是目前使用最广泛的编程语言之一，也是深度学习的主要工具之一。在Python中，有许多优秀的机器学习和深度
Python中的GAN算法实例Jun 10, 2023 am 09:53 AM生成对抗网络（GAN，GenerativeAdversarialNetworks）是一种深度学习算法，它通过两个神经网络互相竞争的方式来生成新的数据。GAN被广泛用于图像、音频、文字等领域的生成任务。在本文中，我们将使用Python编写一个GAN算法实例，用于生成手写数字图像。数据集准备我们将使用MNIST数据集作为我们的训练数据集。MNIST数据集包含
PHP 简单网络爬虫开发实例Jun 13, 2023 pm 06:54 PM随着互联网的迅速发展，数据已成为了当今信息时代最为重要的资源之一。而网络爬虫作为一种自动化获取和处理网络数据的技术，正越来越受到人们的关注和应用。本文将介绍如何使用PHP开发一个简单的网络爬虫，并实现自动化获取网络数据的功能。一、网络爬虫概述网络爬虫是一种自动化获取和处理网络资源的技术，其主要工作过程是模拟浏览器行为，自动访问指定的URL地址并提取所
快速上手Django框架：详细教程和实例Sep 28, 2023 pm 03:05 PM快速上手Django框架：详细教程和实例引言：Django是一款高效灵活的PythonWeb开发框架，由MTV（Model-Template-View）架构驱动。它拥有简单明了的语法和强大的功能，能够帮助开发者快速构建可靠且易于维护的Web应用程序。本文将详细介绍Django的使用方法，并提供具体实例和代码示例，帮助读者快速上手Django框架。一、安装D
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Chinese version
Chinese version, very easy to use
SublimeText3 Mac version
God-level code editing software (SublimeText3)
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
Dreamweaver CS6
Visual web development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
