介绍
使用vue3 + ts实现管理后台?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
<>强利用@vue/cli创建项目强>
首先需要将@vue/cli升级到最新版。本文用的是4.5.6版本。
vue创建管理 光盘管理 npm运行服务
创建选择手动选择手动选择特性,会有一些交互性的选择,是否要安装路由器,vuex等选项,空格可以切换是否选中。我们选中打印稿,路由器,vuex, CSS预处理程序。
我们利用axios + axios-mock-adapter + mockjs来进行接口请求,接口模拟及假数据生成,接下来再安装这几个包。
npm axios安装 npm安装- d axios-mock-adapter mockjs
假设我们的项目包含一个标题,标题的作用是切换页面。两个页面,分别为列表和,这两个页面都是简单的列表+增删改查的操作。
<>强路由强>
需要在路由器中增加一个列表的路由信息。
const路线:Array=( { 路径:& # 39;/& # 39; 名称:& # 39;回家# 39; 组件:回家, }, { 路径:& # 39;/关于# 39; 名称:& # 39;关于# 39; 组件:()=比;{返回导入(/* webpackChunkName:“about"*/& # 39;. ./视图/About.vue& # 39;);}, }, { 路径:& # 39;/列表# 39; 名称:& # 39;列表# 39; 组件:()=比;{返回导入(/* webpackChunkName:“list"*/& # 39;. ./视图/List.vue& # 39;);}, }, ];
<>强列表页强>
首先把列表页的结构写出来,列表和大约的结构大体相似。
& lt; template> & lt; div类=& # 39;content_page& # 39;比; & lt; div类=& # 39;content_body& # 39;比; & lt; div类=& # 39;content_button& # 39;比; & lt;按钮类=& # 39;添加主# 39;@click=& # 39; additem # 39;title=& # 39;添加& # 39;在添加& lt;/button> & lt;/div> & lt; div类=& # 39;content_table& # 39;比; & lt; table> & lt; thead> & lt; tr> & lt; th v=& # 39;项thead& # 39;:关键=& # 39;项目# 39;在{{项}}& lt;/th> & lt;/tr> & lt;/thead> & lt; tbody> & lt; tr v=& # 39;(在列表项,指数)# 39;:关键=& # 39;item.id& # 39;比; & lt; td> & lt;跨度:title=& # 39; item.id& # 39;在{{item.id}} & lt;/span> & lt;/td> & lt; td> & lt; div v=& # 39;指数===currentIndex& # 39;比; & lt;输入 v模型=& # 39;item.name& # 39; title=& # 39;名字# 39;/比; & lt;/div> & lt;跨度:title=& # 39; item.name& # 39;v-else>, {{item.name}} & lt;/span> & lt;/td> & lt; td: title=& # 39; item.sex& # 39;比; & lt; div v=& # 39;指数===currentIndex& # 39;比; & lt;输入 v模型=& # 39;item.sex& # 39; title=& # 39;性与# 39;/比; & lt;/div> & lt;跨度:title=& # 39; item.sex& # 39;v-else>{{项目。性,# 63;& # 39;男& # 39;:& # 39;女& # 39;}}& lt;/span> & lt;/td> & lt; td: title=& # 39; item.birth& # 39;比; & lt; div v=& # 39;指数===currentIndex& # 39;比; & lt;输入 v模型=& # 39;item.birth& # 39; title=& # 39;出生# 39;/比; & lt;/div> & lt;跨度:title=& # 39; item.birth& # 39;v-else>, {{item.birth}} & lt;/span> & lt;/td> & lt; td: title=& # 39; item.address& # 39;比; & lt; div v=& # 39;指数===currentIndex& # 39;比; & lt;输入 v模型=& # 39;item.address& # 39; title=& # 39;出生# 39;/比; & lt;/div> & lt;跨度:title=& # 39; item.address& # 39;v-else>, {{item.address}} & lt;/span> & lt;/td> & lt; td> & lt; div v=& # 39;指数===currentIndex& # 39;比; & lt;按钮 类=& # 39;主要确认# 39; @click=& # 39;确认(项目)& # 39; 祝辞确定& lt;/button> & lt;按钮 @click=& # 39;取消(项)& # 39; 在取消& lt;/button> & lt;/div> & lt;跨越v-else> & lt;跨越@click=& # 39; editItem(指数)& # 39;比; 编辑 & lt;/span> & lt;跨越@click=& # 39; deleteItem(指数项)& # 39;祝辞delete & lt;/span> & lt;/td> & lt;/tr> & lt;/tbody> & lt;/table> & lt;/div> & lt;/div> & lt;/div> & lt;/template>
其中用到了addItem, editItem, deleteItem,确认,取消这几个方法,每个列表页的这几个方法功能都是相同的,唯一的不同就是请求的API,我们可以将这几个API做为参数,将增删改查的方法提取到设置函数中,做到复用。接下来就来到重点的构成API。
<强>构成API具体实现