Laravel5.5 + Vue2.0 + Element UI (iView) + VUX 的搭建_lavel框架加vue加elui-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33430445/article/details/75220471

本文介绍了如何搭建一个使用Laravel5.5作为后端框架，结合Vue2.0、Element UI和iView前端组件库，以及VUX进行移动端开发的应用。详细步骤包括Laravel的安装、Vue的配置、Element UI和iView的集成，以及VUX和Vue Router的使用。通过这个教程，你可以快速入门前后端分离的开发模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构建所需：

composer (请调成中国镜像)
Node.js (请安装稳定版)

npm (最新版node已集成npm，无需另外安装)

淘宝镜像：

    npm install -g cnpm --registry=https://registry.npm.taobao.org

1、下载Laravel

选择 Laravel 版本时，应该优先考虑 LTS 版本，因为安全性和稳定性考虑，商业项目开发中 不应该 使用最新版本的『Laravel 一般发行版』

composer create-project laravel/laravel project-name --prefer-dist "5.5.*"

2、虚拟主机配置自行搜索

另附Linux：https://blog.youkuaiyun.com/qq_33430445/article/details/79158975

3、Vue安装

Laravel 并没有规定你使用哪个 JavaScript 或 CSS 预处理器，不过它还是提供了对大多数应用都很适用的 Bootstrap 和 Vue 来作为默认的起点。默认情况下，Laravel 使用 NPM 安装这两个前端依赖。

npm install

或者

cnpm install

直接进入项目的根目录执行 npm install ，等待一段时间就OK了

然后，写一些代码来测试下，我们进入 resources\assets 目录后会发现，laravel默认带了一个vue的例子

可以看到app.js的代码，发现他是引入了vue，然后注册了一个组件，也就时Example.vue , Example.vue 中输出两句话，这是一个完整的组件，可以直接使用。

如下:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

import App from './App.vue'

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */



const app = new Vue({
    el: '#app',
    router,
    render: h => h(App),
});

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