首页
所有分类
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做一个小游戏平台 (一)
Dec 29 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
通过javascript实现段落的收缩与展开
Jun 26 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
Servlet面试题(20) UNIX面试题(27) PYTHON面试题(27) 软件测试工程师面试题(53) 软件工程师面试题(40) Javascript面试题(44) J2EE面试题(19) Ruby面试题(15) MySQL面试题(19) EJB面试题(46)
You might like
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python中super函数用法实例分析
2019/03/18 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
美国男士内衣品牌：Tommy John
2017/12/22 全球购物
Bose加拿大官方网站：美国知名音响品牌
2019/03/21 全球购物
农贸市场管理制度
2014/01/31 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
教您：房贷工资收入证明应该怎么写？
2019/08/19 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python