laravel 5.4 + vue + vux + element的环境搭配过程介绍

下面就是"laravel 5.4 + vue + vux + element的环境搭配过程介绍"。

简介

这里要介绍的是如何在 laravel 5.4 中使用 Vue.js，并配合使用 vux 和 element 框架。Vue.js 是一个轻量级的前端框架，通过数据绑定和组件化的方式，使得前端的开发更加高效和便捷。vux 是一个专门面向移动端 UI 的框架，基于 Vue.js 实现，兼容 WeUI。Element 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件和常用的业务组件，同时支持国际化和主题定制。

环境准备

• PHP 版本 >= 5.6.4
• Composer
• Node.js 版本 >= 6.0.0
• NPM

Laravel 安装

首先按照官网指引安装 Laravel：

composer create-project --prefer-dist laravel/laravel blog

然后进入项目目录，配置数据库：

cd blog
cp .env.example .env
vim .env

修改好数据库信息后，执行下列命令来生成应用密钥：

php artisan key:generate

最后到 Laravel 网站查看更多 安装文档 和 配置文档。

Vue.js 安装

这里我们使用 vue-cli 来构建一个 Vue.js 的项目。

首先全局安装 vue-cli：

npm install -g vue-cli

创建 Vue.js 项目：

vue init webpack vue-example

进入 vue-example 目录后，执行下列命令来安装依赖：

npm install

最后运行项目：

npm run dev

即可在浏览器中查看项目，访问地址为 http://localhost:8080/ 。

Vux 安装

Vux 依赖于 Vue.js，所以需要先在项目中引入 Vue.js：

<script src="https://vuejs.org/js/vue.min.js"></script>

在 vue-cli 的项目中，可以在 src/main.js 中引入：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

引入 Vux 可以通过 NPM 安装：

npm install vux --save

在 src/main.js 中引入 Vux：

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './store'
import { sync } from 'vuex-router-sync'
import { AlertPlugin, ToastPlugin } from 'vux'

Vue.config.productionTip = false

Vue.use(Vuex)
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)

sync(store, router)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

最后可以通过在组件中使用 Vux 的组件来测试是否正常引入：

<template>
  <div>
    <v-alert type="success" :closable="false">Welcome to Your Vux App</v-alert>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

Element 安装

Element 同样也需要先引入 Vue.js：

<script src="https://vuejs.org/js/vue.min.js"></script>

在 vue-cli 的项目中，可以在 src/main.js 中引入：

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

在 src/main.js 中引入 Element 后，即可在组件中使用 Element 提供的组件：

<template>
  <div>
    <el-button type="primary">Hello, Element!</el-button>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

以上是 "laravel 5.4 + vue + vux + element的环境搭配过程介绍" 的详细攻略，示例说明对象是从基础逐个引入 vue、vux、element 的一个示例，和引入后衍生的今后开发中的示例。