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

程序员文章站 2022-05-14 19:38:27

如今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

下图为我动到的文件

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

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

这样就简单的搭建完成了，可以访问了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： jQuery Collapse1.1.0折叠插件简单使用

下一篇：身体不适，出现寒咳食疗方法有哪几种

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

Laravel实现短信注册的示例代码

JS实现简单的抽奖转盘效果示例

java中instanceof与Class的等价性代码示例

Spring Boot与Kotlin 整合全文搜索引擎Elasticsearch的示例代码

vue+egg+jwt实现登录验证的示例代码

java实现简单的学生信息管理系统代码实例

C#使用ILGenerator动态生成函数的简单代码

C#实现简单的3DES加密解密功能示例

C#多线程爬虫抓取免费代理IP的示例代码

C#实现简单的RSA非对称加密算法示例