一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第12天,点击查看活动详情。
嗨!大家好!我是手可摘棉花,一名前端开发,很开心在这里分享文章,期待着大家的点赞👍与关注➕。
1.介绍
Vuetify
是一个纯手工精心打造的 Material 样式的 Vue UI 组件库 ,支持构件出应用程序所需的组件等,有着完善的文档(支持中文版),长期支持等。根据 Material Design 规范专门开发,每个组件都采用移动优先的方法构建,具有响应性和高度模块化。
框架具有完整以下功能:
-
多种特性功能,双向性(LTR/RTL) 等
-
多种默认样式和动画
-
常见的UI 组件,如警报、横幅、按钮、导航、图片、列表等
-
内置指令来处理用户操作,如点击、滚动、调整大小等。
来自官方的对比图:
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
预览效果:
3.总结
一个非常入门级的框架安装流程。目的是尝试去接触更多的有优秀组件库,可能每个UI框架都可圈可点。但还是要给予每个框架的发展时间。如Vuetify线路图,官方正在极力的重构v3.0
,已支持vue3
及Composition API
和其他的功能。非常期待它以后的版本发布。感谢大家的观看~