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实现的页面日历
Nov 04 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
javascript表格的渲染组件
Jul 03 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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
You might like
php 保留字列表
2012/10/04 PHP
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
python实现剪切功能
2019/01/23 Python
python添加菜单图文讲解
2019/06/04 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
深入学习python多线程与GIL
2019/08/26 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
八项规定整改方案
2014/02/21 职场文书
媒体宣传策划方案
2014/05/25 职场文书
个人授权委托书样本
2014/09/13 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
三年级学生期末评语
2014/12/26 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书