参考: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
然后安装依赖项并执行初始生成以将所有包链接在一起:
# 导航到 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-app 和 v-main 组件以及本地 Playground.vue 文件。
#开发文档
文档位于 packages/docs
中,但也使用了一些来自 packages/api-generator
的文件。 文档的开发服务器可以通过从项目根目录运行 yarn dev docs
来启动,默认情况下将在 localhost:8080 上可用。
如果你想要在文档中看到来自Vuetify的更改,你需要在启动文档服务器之前在vuetify 包中运行 yarn build:lib
。
评论区