文档章节

在laravel项目使用Vue2

羽阁丶
 羽阁丶
发布于 2016/12/02 18:39
字数 727
阅读 177
收藏 0

关于Laravel,其实蛮久以前我就已经用过了,但是一直都是一些个人项目,没有在商业项目中使用过。而Vue呢,我自己一直在用,而且在有些项目的某些页面也有涉及到过。所以这次项目一下来,我分析了一下是一个偏向后台的项目,虽然我从来没有一起用过这俩,但男人总得最自己狠一点~ 于是就决定了这次要用Laravel + Vue。

刚开始我并不想用Laravel自带的laravel-elixir来进行vue的编译,用vue-cli来生成前端项目,但是发现确实是有一些坑不大好填,所以最后还是用了laravel-elixir来编译。

直接上步骤了

1. 在下载配置好Laravel之后,修改根目录下的package.json文件:

 {
  "private": true,
  "scripts": {
    "gulp": "gulp default",
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-plugin-component": "^0.6.0",
    "css-loader": "^0.26.0",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.10",
    "style-loader": "^0.13.1"
  },
  "dependencies": {
    "vue": "^2.1.3",
    "vue-router": "^2.1.1",
    "element-ui": "^1.0.3"
  }
}

然后执行npm install(或者cnpm install)安装依赖(我本地的node版本是7.0)

2. 修改根目录下的gulpfile.js:

const path = require('path');
const elixir = require('laravel-elixir');
require('laravel-elixir-webpack-official');
require('laravel-elixir-vue');

elixir(mix => {

    Elixir.webpack.mergeConfig({
        output: {
            publicPath: '/assets/'
        },
        resolveLoader: {
            root: path.join(__dirname, 'node_modules')
        },
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader'
                },
                {
                    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                    loader: 'file-loader',
                    query: {
                        name: '../assets/[hash].[ext]'
                    }
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
                    loader: 'file-loader',
                    query: {
                        name: '../assets/[hash].[ext]'
                    }
                }
            ]
        },
        resolve: {
            alias: {
                'vue': 'vue/dist/vue.js'
            }
        }
    });

    mix.webpack('./resources/assets/admin.js', './public/build');
});

通过Elixir.webpack.mergeConfig来覆盖掉默认的配置(重要!重要!重要!):

  • 定义资源引用的public目录,然后定义一些常用的loader,注意生成的文件目录默认是在根目录下的public/js里的,由于我想把资源单独放在一个文件里,所以就name里就加了../。

  • 一定要自己加上这些loader,一开始我以为laravel-elixir自带这些loader,然后再使用ElementUI的时候愉快的报了没有loader的错误=。=

  • 还有最后那个resolve的配置也必须要,不然js里import Vue from 'vue'到的就是vue.common.js(vue模块的入口),而vue.common.js在这种编译过程中会一直报错~

3. 愉快的开始开发

  • 在resource/assets里新建admin.js文件,以admin.js为入口编写vue前端项目;

  • 在resource/views中新建blade视图模板,并且在添加相应的路由,最后引入js的路径为:

...
<script src="{{ asset('build/admin.js') }}"></script>

最后执行npm run dev实时进行编译,轻松加愉快~(另外使用npm run prod可以进行生产环境的打包)

最后

虽然写出来就这么点配置,但是却是我踩坑踩了整整一天搞出来的。。。只能说还是太菜,希望能帮到那些依然在坑里的盆友们~

© 著作权归作者所有

羽阁丶
粉丝 1
博文 14
码字总数 9436
作品 0
杭州
前端工程师
私信 提问
laravel-ebank 发布1.0.1正式版,可投入生产环境使用

laravel-ebank 电商类虚拟积分与聚合支付通用解决方案 项目功能基本满足使用,并流畅运行,持续更新中,如有使用方式问题可在QQ群里@群主 现已加入豪华午餐 推荐中小型项目使用 此项目功能已...

yybawang
2018/07/03
0
0
laravel-ebank 基于电商的聚合支付和虚拟积分解决方案

laravel-ebank 项目功能基本满足使用,并流畅运行,持续更新中,如有使用方式问题可在QQ群里@群主 现已加入豪华午餐 推荐中小型项目使用 此项目功能已完成全部代码并满足基本需求(已服务三家...

yybawang
2018/07/03
0
0
EBank 电子银行发布 2.1.0 版本

ebank 电商类站内虚拟积分与聚合支付通用解决方案 项目功能基本满足使用,并流畅运行,持续维护中,如有使用问题可提交 issue 已进入平滑维护期 推荐中小型项目使用 此项目完全开源且功能已完...

yybawang
2018/10/14
0
0
EBank 电子银行发布 2.1.0 版本

ebank 电商类站内虚拟积分与聚合支付通用解决方案 项目功能基本满足使用,并流畅运行,持续维护中,如有使用问题可提交 issue 已进入平滑维护期 推荐中小型项目使用 此项目完全开源且功能已完...

yybawang
2018/10/15
0
0
OpenDigg前端开源项目月报201704

由OpenDigg 出品的前端开源项目月报第一期来啦。我们的前端开源月报集合了OpenDigg一个月来新收录的优质前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具。 reactide React web...

OpenDigg
2017/04/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

听说拼多多因漏洞被薅了200亿?- 谈谈软件测试

昨天看到一个大新闻:拼多多在20日凌晨出现漏洞,用户可以领100元无门槛优惠券。一夜之间,被黑产、羊毛党和闻讯而来的吃瓜群众薅了个底朝天,直到第二天上午9点才将优惠券下架。网上传言这一...

crossin
21分钟前
2
0
微服务架构有毒,何时不使用微服务?

在过去的四年中,使用微服务来构建应用程序似乎成了一种标准。大多数我所合作过的团队也对此表现出了不同程度的兴趣。 微服务所承诺的弹性、高可用、低耦合、敏捷,以及能够解决单体架构带来...

架构师springboot
27分钟前
1
0
日志服务Python消费组实战(三):实时跨域监测多日志库数据

摘要: 本文主要介绍如何使用消费组实时监控多个域中的多个日志库中的异常数据,并进行下一步告警动作。具备配置简单、逻辑灵活、支持跨域多Region、实时监测,无需配置索引等特点,并且性能...

阿里云云栖社区
27分钟前
2
0
常用css动效

1.列表浮层变化动效 demo地址 下载地址 2.js动画库 github地址 3.滚动加载 Scrollreveal 4.其他动效 tobiasahlin

chinahufei
28分钟前
1
0
Coding and Paper Letter(四十六)

资源整理。 1 Coding: 1.卫星影像深度学习资源。 satellite image deep learning 2.runoff tools为MOM生成径流文件的一些工具变得轻而易举。 runoff tools 3.NOAA-GFDL海冰模拟器V2.0。 SIS2...

胖胖雕
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部