laravel5.4+vue+element简单搭建的示例代码
程序员文章站
2022-11-26 12:30:42
如今laravel来到5.4版本，更方便引入vue了，具体步骤如下：
1.下载laravel5.4,这边是（里面的配置文件都写得差不多了）！
2.打开packa...
如今laravel来到5.4版本，更方便引入vue了，具体步骤如下：
1.下载laravel5.4,这边是（里面的配置文件都写得差不多了）！
2.打开package.json
内容如下
{
"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"
}
}
修改一下
{
"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"
}
}
修改的地方看清楚哦
lodash的版本改为^4.17.4，否则编译会出错，请注意红色字体
laravel5.4的mix挺好用，建议大家去看一下，这是地址
3.在根目录运行 cnpm install
注意是cnpm，尤其是windows用户，不然将会报错
4.然后修改resources/assets/js/bootstrap.js
30多行有
复制代码 代码如下:
window.axios.defaults.headers.common = { 'x-csrf-token': .......， 'x-requested-with': 'xmlhttprequest'};
把'x-csrf-token'这一项改为
复制代码 代码如下:
'x-csrf-token': document.queryselector('meta[name="x-csrf-token"]').content,
否则，不能成功获取csrf
5.修改resources/assets/js/app.js
这里简单测试一下，并没有引入element
/**
* 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.修改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>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
然后运行npm run watch
这就简单搭建成功了
第二种方法，没有用到mix
下图为我动到的文件
1.下载laravel5.4
2.命令行（laravel5.4目录下）：composer install
3.新建.env文件，把.env.example里的内容复制到.env文件中
4.生成key，命令行：php artisan key:generate
5.配置文件package.json，内容如下：
{
"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.命令行（没有npm的自行下载）：npm install
7.resources/assets/js下新建app.vue文件，内容如下：
<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.把resources/view/welcome.blade.php改为：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
10.在主目录下新建gulpfile.js文件，内容：
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.命令行（没有gulp,自行下载）：gulp watch
这样就简单的搭建完成了，可以访问了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： JS数组操作之增删改查的简单实现