首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 29, 2017

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

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

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

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

- Author -

sangjinchao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 #Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 #jQuery
浅谈vuex之mutation和action的基本使用
Aug 29 #Javascript
vuex学习之Actions的用法详解
Aug 29 #Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
es6学习之解构时应该注意的点
Aug 29 #Javascript
UNIX面试题(27) Delphi面试题(13) SOA面试题(9) 自我鉴定(671) Javascript面试题(44) Servlet面试题(20) J2EE面试题(19) MySQL面试题(19) Ruby面试题(15) PYTHON面试题(27)
You might like
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
深入浅析python继承问题
2016/05/29 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python cs架构实现简单文件传输
2020/03/20 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python二维码生成识别实例详解
2019/07/16 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
基于python的列表list和集合set操作
2019/11/24 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
用Python进行websocket接口测试
2020/10/16 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
历史专业大学生职业生涯规划书
2014/03/13 职场文书
手机银行营销方案
2014/03/14 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
应届毕业生的自我评价
2019/06/21 职场文书