【Vuetify】离线文档

Chason
2021-03-24 / 3 评论 / 0 点赞 / 1,707 阅读 / 2,478 字
温馨提示:
本文最后更新于 2021-03-24,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

参考:https://vuetifyjs.com/zh-Hans/getting-started/contributing/#section-672c57305f0053d1

补充:离线文档服务器失败,需要升级yarn:yarn upgrade

本地开发

Vuetify仓库是一个 lerna 管理的monorepo, 它连接了vuetify代码库, 文档, api生成器, 同时减少同时处理多个项目之间的摩擦。 下面的指南是为了帮助您立即启动和运行。

#设置您的本地环境

所需软件:

我们的一些依赖项使用 node-gyp 来构建自己。 您不需要安装node-gyp本身,但可能需要安装其他工具,尤其是在windows上。 了解更多信息请查看node-gyp文档.

安装完所有内容后,克隆仓库:

# 使用 HTTPS
git clone https://github.com/vuetifyjs/vuetify.git

# 使用 SSH
git clone git@github.com:vuetifyjs/vuetify.git

我应该使用哪个远程URL?

然后安装依赖项并执行初始生成以将所有包链接在一起:

# 导航到 vuetify 文件夹
cd vuetify

# 安装所有的项目依赖
yarn

# 构建包
yarn build

构建过程将编译所有用于开发的Vuetify包,可能需要一段时间(来点☕)。 一旦软件包构建完毕,您就可以开始开发了。

#Vuetify

Vuetify 库位于 packages/vuetify 中。 在 packages/vuetify/dev 中您将找到一个 Playground.vue 文件. 在项目根目录执行 yarn dev 将在 localhost:8080 启动一个开发服务器并加载此文件. 您可以在playground测试您的更改,然后在准备好后将其内容复制到pull请求中。

您也可以使用 yarn link 测试您自己的项目中的 vuetify :

  • 导航到 packages/vuetify
  • 执行 yarn link
  • 导航到您的项目目录
  • 执行 yarn link vuetify

如果你的项目正在使用 vuetify-loader,你必须运行 yarn build:lib 才能看到变化。 否则您可以使用 yarn watch 启用增量构建。

#Playground.vue

Playground 文件是用于Vuetify开发的清洁室,是框架内迭代更改的推荐方法。

<template>
  <v-container>
    <!--  -->
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      //
    }),
  }
</script>

用于Vuetify 开发的 App.vue 文件位于 packages/vuetify/dev 中。 它包含 v-appv-main 组件以及本地 Playground.vue 文件。

#开发文档

文档位于 packages/docs 中,但也使用了一些来自 packages/api-generator 的文件。 文档的开发服务器可以通过从项目根目录运行 yarn dev docs 来启动,默认情况下将在 localhost:8080 上可用。

如果你想要在文档中看到来自Vuetify的更改,你需要在启动文档服务器之前在vuetify 包中运行 yarn build:lib

0

评论区