目前项目是使用的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. idea自定义文档注释模板

    1.类注释模板 IntelliJ IDE --> Preferences --> Editor --> File and Code Templates --> Includes ...

  2. Basic Queries (LINQ to XML)

    https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/linq/basic-queries-linq-to ...

  3. 删除oracle数据库用户的dba权限（当出现同一用户DBA可以登录，normal不能登录）“无法对SYS拥有的对象创建触发器”

    系统报错:“无法对SYS拥有的对象创建触发器”,搞不懂是什么原因了,到底这触发器要用什么用户才能建立啊? ORA-04089: 无法对 SYS 拥有的对象创建触发器 第一种方式: 首先,用sys用户a ...

  4. yii2.0 ActiveRecord 查询汇总

    User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find()->w ...

  5. linux 忘记root（这里以centos 6.5为例）密码的解决办法

    在使用linux的过程中有时候会忘记root用户的密码(尤其是进行交接而文档内容不全的时候),这个时候我们就可以进入单用户模式来重置root用户密码.下面来讲解重置root密码的方式,也可以说是破解r ...

  6. 搭建gerrit服务器(apache&nginx反向代理方式)

    这段时间,想搭建一个gerrit,用于代码托管,gerrit的搭建,网上有很多种教程,但是自己按照别人的教程逐步操作,一直出现诸多问题.最头痛的就是:Configuration Error Check ...

  7. window下 node.js 的安装

    下载安装文件 Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 32 位安装包下载地址 : https://nodejs.org/dist/v4. ...

  8. [App Store Connect帮助]八、维护您的 App（1）App 维护概述

    您在 App Store 上发行 App 后,需要执行一些任务来回复顾客反馈并在整个产品周期内维护您的 App.您可以按任何顺序执行这些任务. 监控顾客评论.销售情况和分析 您可以在 App 页面的“ ...

  9. 使用vmware12安装Ubuntu 遇到的两个问题和解决

    1.need the x86-64 cpu,but only detected the xxx cpu. 这是因为bios中的virtual function 是 disabled,改为enabled ...

  10. Taro 小程序 自定义导航栏

    在小程序中,有的页面需求可能需要我们做一个自定义的导航栏, 今天就来踩一踩坑 首先需要在app.js 中给全局的导航栏隐藏, // app.js window: { navigationStyle: ...