vong 是一个基于 Vue.js 的组件库，它的目标是为开发者提供一整套高质量的前端 UI 组件，帮助开发者快速构建复杂的 Web 应用程序和网站。
安装
使用 npm 安装 vong：
npm install vong --save
使用方法
在 Vue 组件中引入 vong：
import Vue from 'vue' import Vong from 'vong' Vue.use(Vong)
常用组件
Button
<v-button>按钮</v-button>
Input
<v-input v-model="message" placeholder="请输入内容"></v-input>
Select
<v-select v-model="selected" :options="options"></v-select>
-- -------------------- ---- -------
------ -
------ -
--------- ---
-------- -
- ------ -------- ------ ---- --
- ------ --------- ------ ---- --
- ------ --------- ------ ---- -
-
-
-Checkbox
<v-checkbox v-model="checked">选项</v-checkbox>
data() {
return {
checked: false
}
}Radio
<v-radio v-model="selected" :options="options"></v-radio>
-- -------------------- ---- -------
------ -
------ -
--------- ---
-------- -
- ------ ------- ------ ---- --
- ------ --------- ------ ---- -
-
-
-Card
<v-card>
<v-card-title>卡片标题</v-card-title>
<v-card-content>卡片内容</v-card-content>
<v-card-actions>
<v-button>操作 1</v-button>
<v-button>操作 2</v-button>
</v-card-actions>
</v-card>Dialog
<v-dialog v-model="visible">
<v-dialog-title>对话框标题</v-dialog-title>
<v-dialog-content>对话框内容</v-dialog-content>
<v-dialog-actions>
<v-button @click="visible = false">取消</v-button>
<v-button @click="visible = false">确定</v-button>
</v-dialog-actions>
</v-dialog>data() {
return {
visible: false
}
}Table
<v-table :data="data"> <v-table-column prop="name" label="姓名"></v-table-column> <v-table-column prop="age" label="年龄"></v-table-column> <v-table-column prop="gender" label="性别"></v-table-column> </v-table>
-- -------------------- ---- -------
------ -
------ -
----- -
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- -
-
-
-总结
vong 提供了丰富的组件和功能，让前端开发者能够轻松构建复杂的 Web 应用程序和网站。在开始使用 vong 前，请确保已了解 Vue.js 的基本知识，这将有助于更好地理解和使用 vong。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f581e8991b448e0b62