Skip to content

Latest commit

 

History

History
252 lines (180 loc) · 9.51 KB

README.zh-CN.md

File metadata and controls

252 lines (180 loc) · 9.51 KB
Raw

Vitesse - Opinionated Vite Starter Template

快速地Vitesse 创建 Web 应用


在线 Demo


Note: 本模板创建于 Vue 3 和 Vite 的早期过渡时期。目前，如果您正在寻求更好的 Vue 开发体验和更持续的维护，我们建议您使用 Nuxt 3 来代替（它也可以根据需要使用 SPA 或 SSG）。本模板仍会作为参考缓慢地维护下去，但将不会有太多的更新。


English | 简体中文


Vben Axios

  • 提取 vue-vben-admin 封装的 axios 请求库，将其集成到 vitesse 模板中，方便在别的项目使用

特性

  • 配置项极其丰富，增加自定义配置灵活，封装度高
  • 具体参考 http/axios 目录
function createAxios(opt?: Partial<CreateAxiosOptions>) {
  return new VAxios(
    // 深度合并
    deepMerge(
      {
        // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
        // authentication schemes，e.g: Bearer
        // authenticationScheme: 'Bearer',
        authenticationScheme: '',
        timeout: 10 * 1000,
        // 基础接口地址
        // baseURL: globSetting.apiUrl,

        headers: { 'Content-Type': ContentTypeEnum.JSON },
        // 如果是form-data格式
        // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
        // 数据处理方式
        transform: clone(transform),
        // 配置项，下面的选项都可以在独立的接口请求中覆盖
        requestOptions: {
          // 默认将prefix 添加到url
          joinPrefix: true,
          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
          isReturnNativeResponse: false,
          // 需要对返回数据进行处理
          isTransformResponse: true,
          // post请求的时候添加参数到url
          joinParamsToUrl: false,
          // 格式化提交参数时间
          formatDate: true,
          // 消息提示类型
          errorMessageMode: 'message',
          // 接口地址
          apiUrl: globSetting.apiUrl,
          // 接口拼接地址
          urlPrefix,
          // 是否加入时间戳
          joinTime: true,
          // 忽略重复请求
          ignoreCancelToken: true,
          // 是否携带token
          withToken: true,
          retryRequest: {
            isOpenRetry: true,
            count: 5,
            waitTime: 100,
          },
        },
      },
      opt || {},
    ),
  )
}

特性


预配置

UI 框架

  • UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

Icons

插件

编码风格

开发工具

衍生项目

由于这个模板的业务场景非常的局限，下面提供了一个精心策划的列表，列出了社区维护的具有不同偏好和功能集的衍生项目。也可以看看他们。当然也欢迎你 PR 提供自己的项目！

官方
社区

查看英文版

现在可以试试!

Vitesse 需要 Node 版本 >=14.18

GitHub 模板

使用这个模板创建仓库.

克隆到本地

如果您更喜欢使用更干净的 git 历史记录手动执行此操作

npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm

清单

使用此模板时，请尝试按照清单正确更新您自己的信息

  • 在 LICENSE 中改变作者名
  • 在 App.vue 中改变标题
  • 在 vite.config.ts 更改主机名
  • 在 public 目录下改变favicon
  • 移除 .github 文件夹中包含资助的信息
  • 整理 README 并删除路由

紧接着, 享受吧 :)

使用

开发

只需要执行以下命令就可以在 http://localhost:3333 中看到

pnpm dev

构建

构建该应用只需要执行以下命令

pnpm build

然后你会看到用于发布的 dist 文件夹被生成。

部署到 Netlify

前往 Netlify 并选择你的仓库, 一路 OK 下去，稍等一下后，你的应用将被创建.