目前项目是使用的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. Oracle - 创建表视图等 - DDL

    解锁scott: sqlplus / as sysdba; alter user scott account unlock; alter user scott identified by tiger; ...

  2. Ubuntu 12.10终端Terminal快捷方式调用

    1:使用快捷键:ctrl+alt+t 打开终端 2:在终端上右键,选“Lock to launcher” 这样就锁定在左侧了,需要用时,直接点就打开了.

  3. Android控件之HorizontalScrollView 去掉滚动条

    在默认情况下,HorizontalScrollView控件里面的内容在滚动的情况下,会出现滚动条,为了去掉滚动条, 只需要在<HorizontalScrollView/>里面加一句 and ...

  4. Spring Ioc容器核心类继承图

    Spring IOC容器其实就是BeanFactory的实例,Spring中BeanFactory的类关系结构如下图: 从上图可以看出Beanfactory作为根接口又细化出三个二级接口,最后又有Co ...

  5. Mysql操作符号

    1.比较运算符:  =  相等  <> 不等于 != 这个也可以  >  大于  <  小于  >= 大于等于  <= 小于等于 2.逻辑运算符:  is null ...

  6. 【180】IDL 读写 HDF 文件

    HDF(Hierarchical Data Formats)数据格式由 NCSA 开发.HDF 提供了大量的数据模式,包括多维数组.表格.图像.注解和调色板.在下面的章节中,将描述 HDF 科学数据系 ...

  7. Rails 浅谈 ActiveRecord 的 N + 1 查询问题(copy)

    [说明:资料来自https://ruby-china.org/topics/32364] ORM框架的性能小坑 在使用ActiveRecord这样的ORM工具时,常会嵌套遍历model.例如,有两个m ...

  8. java笔记之IO1

    File:文件和目录(文件夹)路径名的抽象表示形式 * 构造方法: *   File(String pathname):根据一个路径得到File对象 *   File(String parent, S ...

  9. python pip安装第三方模块

    一.pip工具使用 安装windows版本python,自带pip工具.2者路径相同. 如果设置了环境路径,可以直接在命令提示符窗口下尝试运行pip.如果没有设置环境路径,可以先cd命令到pip工具的 ...

  10. 浅谈算法——线段树之Lazy标记

    一.前言 前面我们已经知道线段树能够进行单点修改和区间查询操作(基本线段树).那么如果需要修改的是一个区间该怎么办呢?如果是暴力修改到叶子节点,复杂度即为\(O(nlog n)\),显然是十分不优秀的 ...