文档章节

在laravel项目使用Vue2

羽阁丶
 羽阁丶
发布于 2016/12/02 18:39
字数 727
阅读 166
收藏 0
点赞 0
评论 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
杭州
前端工程师
OpenDigg前端开源项目月报201704

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

OpenDigg
2017/04/12
0
0
v-region 1.5.0 发布,基于 Vue2 的中国行政区划选择器

基于Vue2简洁易用的中国行政区划选择器 v-region 1.5.0版本更新,更新内容: 增加选择器模式 修复初始化选中项目时,项目未选中的问题 增加选择器模式下,省份的排列顺序使用名称长度和编码进...

TerryZ
06/13
0
0
从零构建 vue2 开发环境到入门--vue2-demo

前言 vue2正式版已经发布将近一个月了, 国庆过后就用在了公司的两个正式项目上, 还有一个项目下个月也会采用vue2进行重构 选择它没什么理由,如果非要说一个理由 那就是它的中文文档远比r...

匿名
2016/11/09
4.7K
6
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
2017/04/20
0
0
nmgwap/vue-elementUI后台管理系统

vue搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont 项目预览 http://ldhblog.gitee.io/vueproject/#/login 说明......

nmgwap
06/04
0
0
SanicCRUD-vue 0.1发布, Python 全栈开发实践

本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑,从工程组织、编码、测试、前、后端构建、接口交互等来诠释一个基于Python的全新一代高性能全栈开发实践的Demo, 具备的功能(v0...

boylegu
2017/06/19
736
2
前端开源项目周报0425

由OpenDigg 出品的前端开源项目周报第十八期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。 react-move Rea...

OpenDigg
2017/04/25
0
0
基于 vue2 + vuex 的大型单页面应用--vue2-elm

vue2-elm 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用。 前言 初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大...

cangdu
2017/08/23
1K
6
web前端Vue.js经典开源项目汇总

  Vue是什么?   Vue.js(读音/vju/,类似于view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易...

爱前端
2017/12/03
0
0
基于 vue2 的弹层组件--vue-bulma-dialog

vue-bulma-dialog 是基于 Vue2、bulma0.5.3 实现的弹层组件。接口借鉴了 layer 的使用方式,调用比较简单,配置灵活。 当前版本: v1.0.0 主要功能包括: 1、自定义弹层宽度、自定义标题、自...

叶叶叶知秋
2017/09/25
194
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
57分钟前
0
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
59分钟前
0
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
0
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
10
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
1
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
0
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
2
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部