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

这样就简单的搭建完成了,可以访问了!

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

Javascript 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
Vue render深入开发讲解
Apr 13 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
详解从新建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
You might like
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Django实现网页分页功能
2019/10/31 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
大学生个人推荐信范文
2013/11/25 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
八达岭长城导游词
2015/01/30 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
PHP命令行与定时任务
2021/04/01 PHP
Nebula Graph解决风控业务实践
2022/03/31 MySQL