使用vue3 + ts实现管理后台

  介绍

使用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具体实现

使用vue3 + ts实现管理后台