从零开始教你如何使用vue-cli搭建Vue项目(组件库使用Vuetify)

·  阅读 383

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里面的组件来修改了默认的页面,如下图所示:

成功应用Vuetify!!
分类:
前端
标签: