VUE Vuetify框架安装使用介绍

1,791 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第12天,点击查看活动详情

嗨!大家好!我是手可摘棉花,一名前端开发,很开心在这里分享文章,期待着大家的点赞👍与关注➕。

1.介绍

Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库 ,支持构件出应用程序所需的组件等,有着完善的文档(支持中文版),长期支持等。根据 Material Design 规范专门开发,每个组件都采用移动优先的方法构建,具有响应性和高度模块化。

框架具有完整以下功能:

  • 多种特性功能,双向性(LTR/RTL) 等

  • 多种默认样式和动画

  • 常见的UI 组件,如警报、横幅、按钮、导航、图片、列表等

  • 内置指令来处理用户操作,如点击、滚动、调整大小等。

来自官方的对比图:

2.png

2.安装vuetifyjs

2.1 通过Vue CLI安装

通过vue --version检查是否已经安装了vue cli。如果没有安装,请使用以下命令进行安装

npm install -g @vue/cli

2.2 创建项目

根据自己的信息,选择创建项目的类型选择,不知道的话可以enter选择默认的即可。创建完毕后,会提示下一步的操作提醒,就是进入更目录。

vue create vuetifyjs-app
cd vuetifyjs-app

在已经实例化的项目目录下,执行添加Vuetify, 执行命令会修改项目的默认配置等内容,如果已经存在的项目,请备份好项目,防止导致代码被覆盖丢失。

vue add vuetify

针对其他更多的安装方式,可以进行传送门到官方查看,查看官网其他安装文档

2.3 运行项目

执行运行项目,如果你的项目用npm构建的话,就执行npm run dev。根据执行后的预览地址查看项目

yarn serve

预览效果:

1.png

3.总结

一个非常入门级的框架安装流程。目的是尝试去接触更多的有优秀组件库,可能每个UI框架都可圈可点。但还是要给予每个框架的发展时间。如Vuetify线路图,官方正在极力的重构v3.0,已支持vue3Composition API和其他的功能。非常期待它以后的版本发布。感谢大家的观看~