本教程例子可到GitHub 上下载 Laravel5.5-Vue-Element-ui-Vux

1.laravel5.5安装，详情请参考: https://laravelacademy.org/post/7620.html

2.vue的安装：

直接进入项目的根目录，执行npm install ，建议如果可以的话使用 cnpm install

cnpm安装 　　使用命令执行　　 npm install -g cnpm --registry=https://registry.npm.taobao.org

然后进入 resource\assets 目录后会发现，里面自带了一个vue的例子

然后在 resources\views\welcome.blade.php文件 ，将其修改为下面的代码

将原来的HTML删了，添加一个id为app的div，在其中使用app.js 中注册的组件，需要注意的就是要添加crsf-Token的验证meta标签，和引入 app.js 文件，这个js文件也可以去根目录中的 webpack.mix.js 文集中修改。

 <!doctype html>

 <html lang="{{ app()->getLocale() }}">

     <head>

         <meta charset="utf-8">

         <meta http-equiv="X-UA-Compatible" content="IE=edge">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <meta name="csrf-token" content="{{ csrf_token() }}">

         <title>Laravel</title>

         <!-- Fonts -->

         <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

     </head>

     <body>

         <div id="app">

             <example></example>

         </div>

     </body>

     <script src="/js/app.js"></script>

 </html>

然后，我们npm run dev 一下即可

3.Element-ui 安装

我们可以去 Element-ui 官方文档 查看安装教程，也就是简单的npm 安装一下

npm i element-ui -S   //安装Element-ui

然后在 resources\assets\js\app.js 中引入Element-ui组件

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

修改Example.vue 文件，使用Element-ui的组件，修改为

<template>

    <div>

        <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>

        <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>

    </div>

</template>

<script>

  export default {

    data () {

      return {

        radio: '1'

      };

    }

  }

</script>

最后 npm run dev 编译一下，即可

5. Vux的安装

我们首先安装Vux必要的组件

npm install vux --save   //安装vux

npm install vux-loader --save

npm install less-loader --save

安装完成后我们还需要将 webpack.config.js 文件提出来

cp node_modules/laravel-mix/setup/webpack.config.js

然后打开webpack.config.js 文件，向其中添加一些代码，然后将第8行和第24行的路径修改为 ./node_modules/laravel-mix/src/index和 ./node_modules/laravel-mix/src/builder/WebpackConfig

附加代码：

/**

 * As our first step, we'll pull in the user's webpack.mix.js

 * file. Based on what the user requests in that file,

 * a generic config object will be constructed for us.

 */

require('./node_modules/laravel-mix/src/index'); // 修改路径

require(Mix.paths.mix());

/**

 * Just in case the user needs to hook into this point

 * in the build process, we'll make an announcement.

 */

Mix.dispatch('init', Mix);

/**

 * Now that we know which build tasks are required by the

 * user, we can dynamically create a configuration object

 * for Webpack. And that's all there is to it. Simple!

 */

let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');  //修改路径

module.exports = new WebpackConfig().build();

/**

  *添加的内容

  *================================================

  */

const vuxLoader = require('vux-loader')

const webpackConfig = module.exports // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {

  plugins: ['vux-ui']

})

修改package.json文件的config文件路径 为根目录的webpack.config.js文件

修改为 

然后我们去Vux中找一个demo 然后修改 Example.vue文件为

<template>

    <div>

        <group>

            <cell title="Total" value="￥1024"></cell>

            <cell-form-preview :list="list"></cell-form-preview>

        </group>

    </div>

</template>

<script>

    import { CellFormPreview, Group, Cell } from 'vux'

    export default {

        components: {

            CellFormPreview,

            Group,

            Cell

        },

        data () {

            return {

                list: [{

                    label: 'Apple',

                    value: '3.29'

                }, {

                    label: 'Banana',

                    value: '1.04'

                }, {

                    label: 'Fish',

                    value: '8.00'

                }]

            }

        }

    }

</script>

然后 npm run dev 编译后即可

6. Vue-router 的使用

这里扩展Vue-router的使用，首先，我们要安装vue-router组件

npm install vue-router --save

然后我们在 resources\assets\js 目录下创建 router.js 和 App.vue 文件

在App.vue文件中添加 模板代码：

<template>

    <div>

        <router-view></router-view>

    </div>

</template>

<script scoped>

    export default {

        data(){

            return {}

        },

        components: {

        },

        computed: {},

        methods: {

        },

        mounted() {

        },

    }

</script>

在 router.js 文件中添加:

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter);

export default new VueRouter({

    routes: [

        {

            name:"test",

            path:'/',

            component: resolve =>void(require(['./components/Example.vue'], resolve))

        },

    ]

})

然后我们来修改 app.js 文件，我们需要引入刚才的路由文件，在Vue创建时添加路由和App.vue,

然后等待编译完成即可。

到这里，我们的路由配置就完成了，如果需要添加更多的路由，可以在router.js 中添加一条路由，然后路径指向相应的组件就ok了。

对应相应的文件

即可

注：本文转载  http://blog.csdn.net/mrwangweijin/article/details/78126714，如需转载请注明出处：https://www.cnblogs.com/zhuchenglin/p/7732303.html。

laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)的更多相关文章

  1. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  2. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  3. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  4. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  5. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  8. vue+element ui 的tab 动态增减，切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  9. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. LOJ 3049: 洛谷 P5284: 「十二省联考 2019」字符串问题

    题目传送门:LOJ #3049. 题意简述: 给定一个长度为 \(n\) 的母串 \(S\). 有 \(n_a\) 个 A 类串,都是 \(S\) 的子串,以区间的形式给出. 有 \(n_b\) 个 ...

  2. C#基础之Assembly

    一直以来,我们都在用C#编写程序,编写程序的时候,我们用到继承.多态.接口以及泛型,我们也都明白子类可以继承抽象类,并能够重写父类的抽象方法,可是大家是否想过,如下几个问题: 1.凡树必有根和叶,类的 ...

  3. canvas图片与img图片的相互转换

    最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等.查找了一些资料归纳总结了一些知识. 默认在jq库里进行,引入jquery.qrcode.min. ...

  4. ycmd for emacs 代码自动补全

    YCMD FOR EMACS Table of Contents 1. 安装 1.1. 下载 1.2. 安装相关依赖 1.3. 更新submodules 1.4. 安装 2. 配置 1 安装   1. ...

  5. 小程序 -- ui布局

    Flex布局 相对定位和绝对定位 弹性盒模型 display flex-direction flex-wrap  :nowrap(不换行)/ wrap(换行,第一行在上方)/ wrap-reverse ...

  6. java反射机构应用

    //atom.getClazzName:package.ClassName Class<?> clazz = Class.forName(atom.getClazzName());     ...

  7. Django web框架

    urls的配置 views视图函数 tempalte模板 settings的配置 Django目录结构分析 Django主线 Django-model基础 Django-model聚合查询与分组查询 ...

  8. 【转载】ImportFbx Errors

    [转自http://blog.csdn.net/chenggong2dm/article/details/39580735] 问题: 在导入动作的时候出现一个错误: ImportFBX Errors: ...

  9. 一、ESP8266入门（基于LUA开发）

    序 一入坑便停不下来... 还挺有意思的哈,233,,,, 资料杂,自己一个一个去找确实浪费了不少时间,而且大多还都是英文的,需要硬着头皮看. 这次实践入门,更是对英语的重要确信无疑.Github必须 ...

  10. Codeforces 755F PolandBall and Gifts bitset + 二进制优化多重背包

    PolandBall and Gifts 转换成置换群后, 对于最大值我们很好处理. 对于最小值, 只跟若干个圈能否刚好组能 k 有关. 最直观的想法就是bitset优化背包, 直接搞肯定T掉. 我们 ...