目前项目是使用的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. [10.26_P2] 最短路 (单源最短路应用)

    单源最短路问题拓展 Description 给你一张图,图上有 n 个点,m 条边,要你找到两个点,使其最短路恰好包含给定的 k 个点.输出这条最短路的长度,输入保证有解. 输入格式 第一行两个数 n ...

  2. JS处理空格

    JS处理空格 2010-10-27 11:48:32|  分类: 技术-JS |  标签:js  空格  |字号 订阅     /*删除两侧空格*/ function trim(ui){        ...

  3. openfire重新配置数据库oracle、mysql

    1.openfire重新配置设置: 删除target/openfire/conf/openfire.xml中的 <setup>true</setup> 2.删除浏览器之前访问过 ...

  4. 【SCOI 2005】 最大子矩阵

    [题目链接] 点击打开链接 [算法] 动态规划 我们发现,M只有两种取值,1和2,那么,只需分类讨论即可 当M = 1时,其实这个问题就成了就最大连续子段和的问题,只不过要选K段而已 用f[i][j] ...

  5. 【OpenFOAM】——OpenFOAM入门算例学习

    1  明确目标——为啥费老大劲儿学习OpenFOAM 学习OpenFOAM主要出于课题需要,希望实现以下几个目标: l  [ ]学会用SnappyHexMesh生成高质量网格: l  [ ]学习使用O ...

  6. 从0开始学习Hadoop（2）安装JDK

    参考文档: 安装包方式安装:http://www.cnblogs.com/wuyudong/p/ubuntu-jdk8.html PPA方式安装:推荐  http://www.cnblogs.com/ ...

  7. 2-4 测试案例helloWorld

  8. asp.net mvc4 新特性

    摘自:ASP.MVC Web编程 几种模板的解释

  9. Eclipse打开Android项目报Parsing Data for android-21 failed错误的解决办法（转载）

    转载:http://segmentfault.com/blog/hongliang/1190000000739285 今天手贱,用android命令打开SDK Manager下载了最新的Android ...

  10. akka设计模式系列-akka在秒杀场景的应用

    本博客讨论一下akka在秒杀场景下的应用,提出自己的见解,只做抛砖引玉,大神勿喷.秒杀活动涉及到前中后台各个阶段,为了说明问题,我们简化场景,只研究akka在后台如何处理秒杀业务. 秒杀活动 所谓的秒 ...