安装

本节将介绍如何在项目中安装 hogwarts-ui。

🌈 兼容环境

现代浏览器
支持服务端渲染。


Edge ≥ 79	Firefox ≥ 78	Chrome ≥ 64	Safari ≥ 12

📦 版本

hogwarts-ui 目前还在开发迭代中你可以订阅：https://dev-bs.hogwarts-ui.ceba.ceshiren.com/guide/install.html 来获得版本发布的通知。

✨ 特性

🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 Vue 组件。
🛡 使用 JavaScript 开发。
⚙️ 全链路开发和设计工具体系。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。

🛡 使用 npm 或 yarn 或 pnpm 安装

我们推荐使用 npm 或 yarn 或 pnpm 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

shell

# NPM
$ npm install hogwarts-ui --save

# Yarn
$ yarn add hogwarts-ui

# pnpm
$ pnpm install hogwarts-ui

# NPM
$ npm install hogwarts-ui --save

# Yarn
$ yarn add hogwarts-ui

# pnpm
$ pnpm install hogwarts-ui

如果你的网络环境不佳，推荐使用 cnpm。

🌍 浏览器直接引入

html

<!-- 引入vue3 -->
<script src="https://dev.hogwarts-ui.ceba.ceshiren.com/dist/js/vue.global.js"></script>
<!-- 引入hogwarts-ui -->
<script src="https://dev.hogwarts-ui.ceba.ceshiren.com/dist/hogwarts-ui.umd.js"></script>
<link rel="stylesheet" href="https://dev.hogwarts-ui.ceba.ceshiren.com/dist/style.css" />

<script>
	const app = Vue.createApp()
	app.use(window['hogwarts-ui'])
	app.mount('#app')
</script>

<!-- 引入vue3 -->
<script src="https://dev.hogwarts-ui.ceba.ceshiren.com/dist/js/vue.global.js"></script>
<!-- 引入hogwarts-ui -->
<script src="https://dev.hogwarts-ui.ceba.ceshiren.com/dist/hogwarts-ui.umd.js"></script>
<link rel="stylesheet" href="https://dev.hogwarts-ui.ceba.ceshiren.com/dist/style.css" />

<script>
	const app = Vue.createApp()
	app.use(window['hogwarts-ui'])
	app.mount('#app')
</script>

🎨 社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过测试人社区反馈

安装 ​

🌈 兼容环境 ​

📦 版本 ​

✨ 特性 ​

🛡 使用 npm 或 yarn 或 pnpm 安装 ​

🌍 浏览器直接引入 ​

🎨 社区互助 ​