README

全栈Web开发启动项目模板

演示

使用此模板的演示应用程序截图

实时演示可在此处找到。演示的仓库可在此处找到

功能

• Laravel 6.x
• Vue.js 2.5
• TypeScript
• Vuetify (Material Design)
• 可复用对话框
• NProgress 在 axios 请求中
• 钩子
• Vuex (带安全存储)
• Vuelidate

安装

使用 composer

$ composer create-project --prefer-dist chinloyal/lavuet ProjectName
$ cd ProjectName
$ npm install
$ npm run dev

从 github

$ git clone https://github.com/chinloyal/lavuet.git ProjectName
$ cd ProjectName
$ composer install
$ npm install
$ npm run dev
$ cp .env.example .env
$ php artisan key:generate

使用方法

开发

$ npm run watch # build and watch
$ npm run hot # serve with hot reload

生产

$ npm run prod

应用对话框

首先在主布局 blade 文件中包含 AppDialog 组件。现在您可以通过在 vue 实例上访问 $dialog 来在任何组件中使用对话框。

示例

// Snippet of code
deleteItem() {
    this.$dialog.show({
        title: 'Confirm Delete',
        message: 'Are you sure you want to delete this item?',
        showCancelBtn: true,
        onConfirm() {
            // Delete item
        }
    })
}

应用对话框上的可用选项

showCancelBtn?: boolean;
cancelBtnText?: string;
okBtnText?: string;
title: string;
message: string;
visible?: boolean;
dialogType?: string;
onConfirm?: Function;

'?' 表示可选

安全存储

如果您需要将数据存储在本地存储中，请简单使用 utils 文件夹中提供的实用程序。

import { SecureStorage } from '@/utils/secure-storage';
const storage = SecureStorage.getInstance();

storage.set('key', 'value');

它使用 localStorage，但加密存储的数据，因此不能从控制台访问。

注意：在 laravel 的 .env 文件中设置 MIX_APP_SECRET=my-secret-key，使用一个强大的密钥。

钩子

钩子允许您在推送、提交甚至安装包之前强制执行规则。在 .hooks 文件夹中预构建了一些可以使用的钩子。例如，您可以在 configure.js 文件中强制使用 npm 而不是 yarn，反之亦然。接下来，只需通过在 package.json 的 preinstall 脚本中添加 "preinstall": "node .hooks/frontend/configure.js" 来运行钩子。

可以强制执行的其他事项包括分支名称、分支与另一个分支的更新程度以及甚至代码检查。

注意

• 这不是一个 SPA。
• 您可以在 blade 文件中使用 vuetify 组件