目前项目是使用的vue+laravel来写的，其中laravel和vue分别放了一个目录，但是这样有个问题，那就是vue需要经常更新，不然运行项目会经常出现各种问题，这里就看了看laravel的文档，才知道还有Mix这个组件，进行编译前后端资源。下载完成后的目录和laravel是一样的，只是在根目录下面有一个node_models目录。

安装：

安装Node，首先要确保自己的电脑上面有安装Node。

使用：node -v    和   npm -v查看是否有版本号，有即表示有安装Node，否则需要安装Node。

cdn.jsdelivr.net/npm/vue,下载最新的Node。

接下来就需要安装Laravel Mix，首先安装Laravel项目：composer create-project --prefer-dist laravel/laravel blog  这里项目的名字叫blog  。

安装成功后，进入安装目录。

安装前端依赖：npm install（这里可以选择淘宝镜像）

使用例子：

修改 routes/web.php 文件为：

Route::get('/',function(){

return view('index');

});

新建一个Hello.vue文件

在 resources/assets/js/components 目录下新建 Hello.vue 文件

  1.  
    <template>
  2.  
    <div>
  3.  
    <h1>Hello, Larvuent!</h1>
  4.  
    <p class="hello">{{ msg }}</p>
  5.  
    </div>
  6.  
    </template>
  7.  
     
  8.  
    <script>
  9.  
    export default {
  10.  
    data() {
  11.  
    return {
  12.  
    msg: 'This is a Laravel with Vue and Element Demo.'
  13.  
    }
  14.  
    }
  15.  
    }
  16.  
    </script>
  17.  
     
  18.  
    <style>
  19.  
    .hello {
  20.  
    font-size: 2em;
  21.  
    color: green;
  22.  
    }
  23.  
    </style>

修改 app.js 文件

修改 resources/assets/js/app.js 文件

  1.  
    require('./bootstrap');
  2.  
     
  3.  
    window.Vue = require('vue');
  4.  
     
  5.  
    // Vue.component('example', require('./components/Example.vue')); // 注释掉
  6.  
    import Hello from './components/Hello.vue'; // 引入Hello 组件
  7.  
     
  8.  
    const app = new Vue({
  9.  
    el: '#app',
  10.  
    render: h => h(Hello)
  11.  
    });

新建 Laravel 视图文件，和 Vue 交互

在 resources/views 目录下新建 index.blade.php 文件

  1.  
    <!doctype html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Larvuent</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <div id="app"></div>
  9.  
     
  10.  
    <script src="{{ mix('js/app.js') }}"></script>
  11.  
    </body>
  12.  
    </html>

编译：运行  npm run dev

提示编译成功，并访问页面：输入http://192.168.1.112

显示如下表示成功：

现在已经完成vue+laravel了，还需要引入element.

npm i element-ui -S   即可引入element

修改 resources/assets/js/app.js 文件

  1.  
    import Hello from './components/Hello.vue'; // 引入Hello 组件
  2.  
    import ElementUI from 'element-ui';
  3.  
    import 'element-ui/lib/theme-default/index.css';
  4.  
    Vue.use(ElementUI);

修改Hello.vue，使用element组件。

  1.  
    <template>
  2.  
    <div>
  3.  
    <h1>Hello, Larvuent!</h1>
  4.  
    <el-button @click="visible = true">按钮</el-button>
  5.  
    <el-dialog v-model="visible">
  6.  
    <p>欢迎使用 Element</p>
  7.  
    </el-dialog>
  8.  
    </div>
  9.  
    </template>
  10.  
     
  11.  
    <script>
  12.  
    export default {
  13.  
    data() {
  14.  
    return {
  15.  
    visible: false
  16.  
    }
  17.  
    }
  18.  
    }
  19.  
    </script>
  20.  
     
  21.  
    <style>
  22.  
    .hello {
  23.  
    font-size: 2em;
  24.  
    color: green;
  25.  
    }
  26.  
    </style>

再次运行npm run dev  进行编译前端资源。然后访问页面如下：

这里修改了一个vue文件就要重新编译一次，很麻烦，所有可以运行  npm run watch 就可以不需要再次编译了，每次修改过后的代码自动就会编译。

这里还有一个很重要的问题，那就是很多人参照以上的步骤会报错，并不会出现正常的页面。

很多人都会出现这样的问题。

所有需要在index页面加一个header头，就可以了。

修 改  resources/views/index.blade.php  文件为

目前都只是最基本的使用，大型项目是需要使用vue路由的。所有这里需要安装路由。

运行  npm install vue-router --save-dev  安装路由。

配置：

在 resources/assets/js 目录下新建目录 router ，同时在 router 目录下新建 index.js 文件

  1.  
    import Vue from 'vue';
  2.  
    import VueRouter from 'vue-router';
  3.  
    Vue.use(VueRouter);
  4.  
     
  5.  
    export default new VueRouter({
  6.  
    saveScrollPosition: true,
  7.  
    routes: [
  8.  
    {
  9.  
    name: 'hello',
  10.  
    path: '/hello',
  11.  
    component: resolve => void(require(['../components/Hello.vue'], resolve))
  12.  
    }
  13.  
    ]
  14.  
    });

在 resources/assets/js 目录下新建 App.vue 文件

  1.  
    <template>
  2.  
    <div>
  3.  
    <h1>Hello, {{ msg }}!</h1>
  4.  
    <router-view></router-view> <!--路由引入的组件将在这里被渲染-->
  5.  
    </div>
  6.  
    </template>
  7.  
     
  8.  
    <script>
  9.  
    export default {
  10.  
    data() {
  11.  
    return {
  12.  
    msg: 'Vue'
  13.  
    }
  14.  
    }
  15.  
    }
  16.  
    </script>
  17.  
     
  18.  
    <style>
  19.  
    </style>

修改 resources/assets/js/app.js 文件为

  1.  
    // import Hello from './components/Hello.vue';
  2.  
    import App from './App.vue';
  3.  
    import ElementUI from 'element-ui';
  4.  
    import 'element-ui/lib/theme-default/index.css';
  5.  
    Vue.use(ElementUI);
  6.  
     
  7.  
    import router from './router/index.js';
  8.  
     
  9.  
    const app = new Vue({
  10.  
    el: '#app',
  11.  
    router,
  12.  
    render: h => h(App)
  13.  
    });

重新编译。

Laravel Mix编译前端资源的更多相关文章

  1. 基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源

    本节我们将讨论如何将前端资源集成到项目中,包括前端资源的发布和引入.本项目将使用 Bower 和 Gulp 下载和集成jQuery.Bootstrap.Font Awesome 以及 DataTabl ...

  2. laravel 中 与前端的一些事2 之使用Gulp编译sass

    下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...

  3. Bower和Gulp集成前端资源

    在我们开始前先介绍下流程: 安装node.js. 安装npm. 全局安装bower. 根目录创建 .bowerrc (可选) 在项目中安装bower 并创建 bower.json 文件,运行 bowe ...

  4. 版本号/缓存刷新 laravel mix函数

    很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本.Mix 可以使用 version 方法为你处理这种场景. version 方法会自动附加唯一哈希到已 ...

  5. Laravel5.1 搭建博客 --编译前端文件

    上篇文章写了Gulp编译前端文件,这篇记录下在搭建博客中使用Gulp 1 引入bootstrap和js 1.1 首先先在项目本地安装Bower sudo npm install bower 1.2 创 ...

  6. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  7. 前端资源构建-Grunt环境搭建

    前端资源构建-Grunt 随着前端开发的复杂度越来越高,前端页面动辄上几十个js,十几个html页面.用户打开一个页面需要加载一堆的css,js,html文件,对于有大量用户的web应用来说,既消耗服 ...

  8. Android反编译(二)之反编译XML资源文件

    Android反编译(二) 之反编译XML资源文件 [目录] 1.工具 2.反编译步骤 3.重新编译APK 4.实例 5.装X技巧 6.学习总结 1.工具 1).反编译工具  apktool http ...

  9. 前端比较好的学习资料（包括js和css）以及 最全前端资源汇集

    js详细资料: http://javascript.ruanyifeng.com/ 『引』最全前端资源汇集: 来源:http://www.jeffjade.com/2016/03/30/104-fro ...

随机推荐

  1. web项目开发 之 前端规范 --- HTML编码规范

    此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文 档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处,JS前端实用开 ...

  2. java中字节数组byte[]和字符（字符串）之间的转换

    转自:http://blog.csdn.net/linlzk/article/details/6566124 Java与其他语言编写的程序进行tcp/ip socket通讯时,通讯内容一般都转换成by ...

  3. windows系统下mysql5.5查看和设置数据库编码

    1.显示当前编码命令: show variables like 'char%'; 2.设置编码为utf8命令:set names 'utf8';

  4. 并不对劲的bzoj4012:loj2116:p3241: [HNOI2015]开店

    题目大意 有一棵\(n\)(\(n\leq1.5*10^5\))个节点的二叉树,有点权\(x\),边权\(w\),\(q\)(\(q\leq2*10^5\))组询问,每组询问给出\(u,l,r\),求 ...

  5. bzoj1047 [HAOI2007]理想的正方形——二维单调队列

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1047 就是先对行做一遍单调队列,再对那个结果按列做一遍单调队列即可. 代码如下: #incl ...

  6. 思维导图js

    http://baike.baidu.com/view/1469162.htm?fromenter=Mind+Maps

  7. win10系统安装loadrunner11提示“为了对电脑进行保护 已经阻止此应用”的解决方案

    在执行loadrunner安装包中的setup.exe时会有如下提示: 解决方法:点击Win+R快捷键打开运行,输入“ gpedit.msc”按下回车键打开组策略编辑: 在左边选择[计算机配置]→[W ...

  8. Quartz.NET 快速入门

    官网:http://www.quartz-scheduler.net/ API:http://www.quartz-scheduler.net/documentation/index.html 快速入 ...

  9. Swift4 构造体, 属性, 索引

    创建: 2018/02/19 完成: 2018/02/25 [任务表]TODO  构造体定义  定义的概要 struct 型名 { (变量/常量的定义) (构造函数的定义) (方法的定义) (其他定义 ...

  10. P3171 [CQOI2015]网络吞吐量

    传送门 首先跑一遍最短路,如果一条边满足\(dis[v]=dis[u]+w[i]\),那么这条边就在最短路中,把它加进网络流的图里 然后点的流量限制的话拆点,把每个点拆成两个,中间连边来限制流量 最后 ...