当前位置: 首页 > Web前端 > vue.js

前端开发Vue技术栈编写表单组件

时间:2023-03-31 19:25:53 vue.js

使用Inertia+Vue编写单页组件初始化Jetstream+Inertia在开始之前,假设你已经安装了一个新的系统Laravel8项目,接下来需要安装Jetstream扩展包通过Composer:composerrequirelaravel/jetstream接下来用Inertia技术栈初始化Jetstream:phpartisanjetstream:installinertial运行如下代码初始化前端依赖:npminstall&&npmrundev编译成功后运行数据库初始化相关数据表的迁移命令:phpartisanmigrate安装&初始化完成后,可以在resources/js目录下看到新建的脚手架组件:所有Inertia页面组件默认位于Pages目录下,Jetstream自带组件存储在Jetstream目录中。基于Inertia编写Vue页面组件接下来我们创建一个发布文章的页面组件,其中还包含一个独立的文章发布表单组件,并在Pages目录下新建一个Post子目录,用于包含前端培训文章相关页面的组件,然后在该目录下创建表单组件PostCreateForm.Vue和页面组件Create.vue。友情提示:可以先阅读Inertia官方文档,熟悉Inertia的基本语法,以及部分JetstreamInertia文档,学习如何在Laravel中编写Vue组件。我们先写表单组件PostCreateForm.vue:这是发布的页面一篇新文章

{{form.body}}
<模板#actions>立即发布是一个普通的Vue简单文件组件,只是应用Inertia内置的API方法提交表单,渲染表单验证错误信息然后在Create.vue中引入这个表单组件来渲染发布的文章页面: