本教程例子可到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 文集中修改。
1 <!doctype html> 2 <html lang="{{ app()->getLocale() }}"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="csrf-token" content="{{ csrf_token() }}"> 8 9 <title>Laravel</title> 10 11 <!-- Fonts --> 12 <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> 13 14 </head> 15 <body> 16 <div id="app"> 17 <example></example> 18 </div> 19 </body> 20 <script src="/js/app.js"></script> 21 </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。