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

2024-12-09 10:37:16

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

下图为我动到的文件

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

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

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

vuejs+element-ui+laravel5.4上传文件的示例代码

前言之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑.其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法. element-ui的upload组件我的vue代码: <template> <el-upload :action="uploadAction" list-type="picture-card" :on-remove="handleRemove&q
laravel5.4+vue+element简单搭建的示例代码

如今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/webp
vue 运用mock数据的示例代码

本文介绍了vue 运用mock数据的示例代码,分享给大家,具体如下: 初始化你的项目话不用啰嗦,首先初始化你的项目,最简单的就是使用vue-cli啦 vue init webpack 引入mock.js 安装 mockjs npm install --save-dev mockjs 引入到Vue原型上,方便使用 import mockjs from 'mockjs' Vue.prototype.$mock = Vue.$mock = mockjs.mock 以上引入到Vue原型上,可以使用 t
vue生成随机验证码的示例代码

本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"
如何在vue中使用ts的示例代码

本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可
vue实现图片滚动的示例代码(类似走马灯效果)

上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde
Vue实现输入框@功能的示例代码

目录前言成员列表创建使用输入框获取光标的坐标保存光标插入文本运行结果总结前言前几篇文章中分别介绍了如何实现聊天输入框的双向绑定.回车键发送.粘贴文本图片等功能,本着完善输入框的目的,文本重点介绍聊天框如何实现@功能. 文章回顾: Vue实现contenteditable元素双向绑定的方法详解 Vue实现输入框回车发送和粘贴文本与图片功能首先需要先理清思路: 成员列表组件,需要根据光标的位置调整,点击成员项时回调成员信息获取光标的位置坐标(x值,y值) 输入框失焦时记录
2分钟实现一个Vue实时直播系统的示例代码

前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下. 第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务.也花不了几个钱,练手的话,几十块钱就够了. 这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成.记住下面生成的地址,下面会用到. 第二步,下载本地推流工具 https://obsproject.com/ 第三步,设置OBS 在第一步中图片底部有推流地址,需要注意,分为两部分填入下方图所示. 在AppName字
C#实现简单的天气预报示例代码

前言本来是打算用C#爬取天气网站上的信息,然后用正则表达过滤有用信息的,但是很淦,正则表达式太难了.无意间找到添加web引用的方式来获取天气信息,亲自测试后发现效果尚可,就记录一下. 引用部分由于本次是控制台应用,就没有页面设计了.在VS中新建控制台程序后,右击"引用"--"添加服务引用". 在"添加服务引用"左下角选择"高级". 在"服务引用设置中"选择左下角的"添加web引用".
在Vue中使用antv的示例代码

一,在vue原型中使用 1.首先安装antv/g2 yarn add @antv/g2 --save 2.在main.js中挂在到vue原型实例中 const G2 = require('@antv/g2') Vue.prototype.$G2 = G2 3.在vue文件中可以直接在mounted生命周期中直接使用 <template> <div> <div id="c1"></div> </div> </templat
C# Guid长度雪花简单生成器的示例代码

标准的long雪花长度为64bit,还要浪费1bit,然后41位时间,10位workid,12位序列 guid长度128位,64位完整的时间tick,32位workid,32位序列,可谓随便用满非常豪华也就是系统里可以根据需要有的地方存随机guid,有的地方存雪花guid,随便换随后还有提取时间的方法,由于是64位完整时间,直接拿出来转时间就好了这个类参考别人的代码,如果需要设计更完善的guid雪花,可以在github上或者nuget上找newid这个项目,老外写好的更完善的做法 publ

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

相关推荐

随机推荐