目前项目是使用的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. 创建GitHub技术博客全攻略【转】

    本文转载自:http://blog.csdn.net/renfufei/article/details/37725057/ 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比 ...

  2. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  3. HAProxy+Keepalived构建高可用负载均衡

    http://www.linuxidc.com/Linux/2012-03/55880.htm web1 IP 192.168.0.47 web2 IP 192.168.0.48 haproxy_ma ...

  4. hdu 1719

    Friend Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  5. Html.PartialView(),html.Renderpartial,html.action.html.RenderAction 辅助方法

    Html.Partial(), 返回HTML字符串 .参数为部分视图 html.RenderPartial(),不返回返回HTML字符串 ,直接输出响应流.参数为部分视图 一般用于主视图中已经存在了这 ...

  6. 2-3 Windows下一站式开发环境anaconda搭建

    D:\Users\ZHONGZHENHUA\Anaconda3\Scripts\activate.bat https://www.geforce.com/hardware/notebook-gpus/ ...

  7. oracle 备份数据

    exp AC_SSO/AC_SSO@HB file=d:\wamp\Golden3C_AuthenticationCenter.dmp owner=AC_SSO full=y用户名/密码@服务 exp ...

  8. StretchedBillboard 实现

    参考Unity粒子系统的StretchedBillboard,在保持模型的右朝向不变的情况下,尽量朝向摄像机 转化为数学问题: 一个向量在一个面上的投影 基础的Billboard的方向应为: 从中点指 ...

  9. bzoj 3470: Freda’s Walk【拓扑排序+期望dp】

    dfs会T,只好正反两遍拓扑了-- #include<iostream> #include<cstdio> #include<queue> #include< ...

  10. ————————C语言中快速排序方法——————————————

    在对浮点型排序是一定要用三木运算符(三目运算符内容下去自己看),因为如果也是用整形那样的减法的时候如果是两个十分相近的数字 可能返回一个小数(自己一会去试试),冉冉他cmp返回值是int(试试别的)因 ...