laravel5.4+vue+element简单搭建的示例代码

如今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’};