Vuetify创建

1.vuetify简介

Vuetify是一个Vue UI库,包含手工制作的精美材料组件。不需要设计技能-创建令人惊叹的应用程序所需的一切都触手可及。

说白了就是javaweb和springboot的关系，所以的东西都帮你封装好了，你直接拿来用就行。

学习vuetify最好有vue的基础，而vue是需要html、css的基础，如果不懂的话，可以去网上找资料看看基础内容，不需要花太多时间（ps：仅对于后端，前端这个需要深入学习）

vuetify官网：基于 Vue 编写的 Material Design 框架 — Vuetify.js

2.创建

1.环境搭建

下载安装好node.js，教程网上百度去。下载安装npm，教程百度。

安装vue，可以在cmd里面安装，也可以直接用vscode，以下vscode演示

//如果安装了旧的版本，用下面的命令卸载
 npm uninstall -g vue-cli

//重新安装最新版本的vue
  npm install -g @vue/cli

配置好路径之后，在命令行中输入，检测是否安装好node.js、npm、vue:

//单行输入，检测node.js是否安装完成
node -v



//换行输入,检测是否安装好npm
npm -v


//单行输入，注意V要大写的,检测是否安装好vue
vue -V

2.创建vuetify项目

vuetify支持用界面创建项目，这里用ui创建代替命令行创建。

Vue UI 安装

Vuetify 也可通过 Vue UI——Vue CLI 的全新可视化应用程序——进行安装。确保你已安装了最新版的 Vue CLI，在终端上输入：

// ensure Vue CLI is >= 3.0
$ vue --version

// Then start the UI
$ vue ui

vscode终端输入命令vue ui

 浏览器跳到的界面：

输入路径完成后，点击在此创建新项目 

跳转的页面：

直接创建项目，不需要保存设置。

 正在下载项目的文件。。。

创建成功出现的界面：

项目对应路径和文件夹：

3.更新创建bug

手动创建项目那里，如果你的电脑使用的是vue2的版本，可以这样创建，但是如果使用更高版本的话，选择使用vue2创建

创建成功的项目里面文件scr/ view/App.vue里面一定要有<vue-app></vue-app>这组标签，如果没有，则无法使用vuetify。你可以选择百度教程添加插件，但是那样会很麻烦，而已说不定还不能成功解决。所以最好的方法还是删掉这个项目文件，重新创建一个项目。

创建成功的App.vue文件：