如今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 content="width=device-width, initial-scale=1"> <meta content="{{csrf_token()}}"> <title>123</title> </head> <body> <div></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，内容如下：