一个Vue3+TS的模版

482 阅读1分钟

前言

Vue3+TS是目前比较常用的一个web开发技术,但是对于复杂的配置很浪费时间,所以一个配置好的模版项目就很实用,这里介绍一个好用的Vue3+TS的模版vue3-template

介绍

vue3-template是一个开源的Vue3+TS的模版,避免掉了在构建项目中的复杂配置,实现了开箱即用的一个功能,并且内置了很多常用的工具和组件。

根据项目介绍,模版已经配置好了vue-router、pinia、axios、sass和element-plus的按需导入,并对ESlint和Prettier等常用的配置进行了配置。

image.png

image.png

项目的仓库地址为github.com/maojiu-bb/v…

结构

仓库项目的目录结构如下所示:

对不同功能的文件进行了划分,提供了一个详细的目录结构。

image.png

image.png

使用

# clone the project / 克隆项目
git clone git@github.com:maojiu-bb/vue3-template.git
# install the package / 安装依赖
yarn
# startup project / 启动项目
yarn dev
# build project / 打包项目
yarn build

这个模版已经对常用的工具进行了封装,只需要在对应的位置进行写就可以了。

  • axios封装:

image.png

  • 全局组件封装:

image.png

  • 路由配置:

image.png

image.png

  • 主题配置:

image.png

  • store配置: 提供了组合式的仓库和选项式的仓库

image.png

image.png