README

vuravel.com • 文档 • 演示 • Twitter

vuravel/components

vuravel\components 是一个组件库，可以帮助您在几秒钟内编写表单。无论您需要多么复杂的用户输入，您都可以找到一个处理该输入的组件。您还可以选择不同的样式以满足您的需求。

请参阅网站以获取最新信息、演示和此包的完整详细文档：vuravel.com

需求

您需要在本地服务器上安装一个 Laravel 5.6+ 应用程序。
您需要 composer 来拉取供应商包。
Vue.js 2.0+ 已经随 Laravel 安装，因此这里无需做任何事情。
需要 Node.js 和 npm 来构建和拉取前端模块。

安装

Composer - 后端设置

如果您已安装 Laravel 5.6+ 应用程序，您可以通过在项目根目录运行以下终端命令来通过 composer 安装 vuravel/form

composer require vuravel/components

Npm - 前端设置

要将前端模块拉入您的开发环境，您需要在您的机器上安装 nodejs 和 npm。然后您可以运行此命令

npm install --save vuravel-components

安装过程完成后，您应该在 app.js 中导入 JavaScript 模块。这将导入来自 vuravel/form 的所有 Vue 组件到您的项目中，您将能够在 Vue.js 代码的任何地方使用它们。

//app.js
window.Vue = require('vue');

//Adding vuravel after Vue has been required
require('vuravel-components')

要导入 scss 代码，请在 app.scss 中添加此行

//app.scss

//For Forms: Pick your favorite form style
@import  'vuravel-form/sass/bootstrap-style';
//@import  'vuravel-form/sass/md-filled-style';
//@import  'vuravel-form/sass/md-outlined-style';
//@import  'vuravel-form/sass/floating-style';

//For Catalogs:
@import  'vuravel-catalog/sass/catalog';

//For Menus: Choose between minimal and classic style
@import  'vuravel-menu/sass/minimal-style';
//@import  'vuravel-menu/sass/classic-style';

之后只需编译资源。

npm run dev

然后在模板中引用它们。

<!-- header -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">

<!-- scripts -->
<script src="{{ mix('js/app.js') }}"></script>

现在您已经准备好开始创建 Vuravel 组件了！

文档

请参阅网站的完整文档

组件 API

API

演示

示例

vuravel / components

维护者

详细信息