Vuetify官网(英文):vuetifyjs.com/en/introduc…
Vuetify官网(中文):vuetifyjs.com/zh-Hans/int…
官网上给出了比较多的安装方式(vuetifyjs.com/en/getting-…),今天,我们选择最简单的一种分享给大家:使用vue-cli
1.首先,全局安装@vue/cli
前提条件:已经安装了node环境(cmd打开或者git bash打开之后,输入node --version查看安装的版本号)
npm install -g @vue/cli
查看安装是否成功:vue --version,如果显示了版本,表示已经安装成功了。
注意:如果安装不成功,请检查环境变量中是否添加了对应的安装路径。
安装完成之后,新建一个文件夹,生成一个新的Vue脚手架项目。
命令:vue create test-vue-cli (我这里取名为test-vue-cli,你们可以根据自己的喜好来取名)
等待上面4个步骤执行完成即可创建成功。
2. 开始添加Vuetify组件库
2.1 安装命令
cd test-vue-cli
vue add vuetify
很不幸,报错了。好在并不是什么难事,显示目前的node版本不匹配,需要>=11.10.1,但是我的环境上的版本是11.0.0。那就先安装一个更高版本的node吧。
到node官网(nodejs.org/zh-cn/downl…)选择你需要的版本进行下载,我这里下载的是最新的版本:v12.18.3
PS: 强烈建议大家多下载几个node的版本放在本地都安装上,因为不知道什么时候那个依赖于现有的node不匹配了,就需要切换node的版本来适配。
2.2 安装过程
可以看到如下的过程,就证明成功安装vuetify了。
选择推荐的默认安装方式(Default(recommended)),使用上下箭头来选择,然后按Enter键即可。
3. 使用Vuetify
安装完成之后就剩下如何使用Vuetify了,使用的过程也比较简单。
(1)启动vue UI界面
命令:vue ui
(2)在界面上操作相应的创建等等
3.1 打开Vue UI界面
3.2 创建步骤
(1)选择“+“创建:输入文件夹的名称,这里是test-app
(2)点击"下一步->",看到有如下几个选项,这个时候我们选择"手动"
(3) 继续点击"下一步->",选择你常用的几个配置即可
(4)继续点击"下一步->",点击下拉框,选择TSLint (deprecated)之后,点击"√创建项目"
(5)设置预设名称:这里先设定为first-configuration
(6)创建新项目的同时,可以看到控制台也在运行,创建成功后:提示项目创建完成!
更新后的界面展示如下所示:
(7)切换到任务,点击serve运行起来之后,输入地址:localhost:8080,即可看到如下页面,则说明已经成功创建。
4. 重点来了
我们在第3个章节里面说了那么多怎么创建项目,并且运行项目的过程,真正的使用Vuetify现在才开始:
4.1 如何查找vuetify组件
我们切换到"插件",搜索vuetify,找到之后点击插件名,并安装。
4.2 安装完成
4.3 配置
(1)选择Configuration (advanced),如下所示:
(2)再次切换到"插件",可以看到vue-cli-plugin-vuetify已经安装成功。
最后,你就可以在你的项目中愉快的使用Vuetify了。(^▽^)
我简单的尝试了一下使用Vuetify里面的组件来修改了默认的页面,如下图所示: