本教程例子可到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)(转)的更多相关文章
-
Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
-
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
-
分享一个自搭的框架，使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
-
vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
-
vue + element ui 表格自定义表头，提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
-
vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
-
vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
-
vue+element ui 的tab 动态增减，切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
-
基于 vue+element ui 的cdn网站（多页面，都是各种demo）
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
随机推荐
-
require.js
日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...
-
【经验之谈】前端面试知识点总结03（JavaScript相关）——附答案
目录 三.JavaScript部分 1.谈谈你对Ajax的理解?(概念.特点.作用) 2.说说你对延迟对象deferred的理解? 3.什么是跨域,如何实现跨域访问? 4.为什么要使用模板引擎? 5. ...
-
【Android纳米学位】project 0 - 问题汇总
1.页面布局 参考:http://www.xuebuyuan.com/1100763.html 从不知道如何下手到开始布局出想要的样子,使用线性布局及属性 margin,padding 2.添加点击事 ...
-
SorlNet
Solr学习 上一篇已经讲到了Solr 查询的相关的参数.这里在讲讲C#是如何通过客户端请求和接受solr服务器的数据, 这里推荐使用SolrNet,主要是:SolrNet使用非常方便,而且用户众多, ...
-
Java模式(适配器型号)
今天阅读Java该适配器模式,这里有一个小的总结和下谈感受.对于将来使用. 首先.让我们有关适配器先说说. 适应是“来源”至“目标”适应.其中连接这两个的关系是适配器.它负责“源”过度到“目标”. 举 ...
-
CSU 1806 Toll
最短路,自适应$Simpson$积分. 看了别人的题解才知道有个东西叫自适应$Simpson$积分. 有这样一个积分公式:$\int_a^b {f(x)dx} \approx \frac{{b - ...
-
PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获--补充
荒废了一个多月了,重新捡起来,手生了不少.发现在<4.1下>的文章里没有 提到pcap库,实在是不应该. 在网络数据分析的工具中,tcpdump绝对是大名鼎鼎,tcpdump底层是libp ...
-
tornado框架学习及借用有道翻译api做自动翻译页面
趁着这几天有时间,就简单的学了一下tornado框架,简单做了个自动翻译的页面 仅为自己学习参考,不作其他用途 文件夹目录结构如下: . ├── server.py ├── static │ └─ ...
-
牛客JS编程大题（二）
11.统计数组 arr 中值等于 item 的元素出现的次数 function count(arr, item) { var num = 0; for(var i = 0;i < arr.len ...
-
memcache bug
用memcached有时会报错 the lowest two bytes of the flags array is reserved for pecl/memcache 将以前的 $mc-> ...