零基础VUE+Vuetify基础环境搭建并使用WebStorm开发

零基础VUE+Vuetify基础环境搭建

最近前端人口紧缺，加上我认为后端对前端也需要进行一定的了解，所以产生了这篇文章，来描述一个前端零基础的人搭建VUE+Vuetify的心路历程（踩坑之路）

node.js安装

这里需要注意，我们的node.js不能安装到带空格的路径下（Program File），因为我后续是使用WebStorm进行开发的，WebStorm在新建Vue项目的时候如果有空格会没法识别（百度的方法我都试了都不行），因此我们选择新建一个没有空格的目录。

1. 下载node.js
   进入https://nodejs.org/zh-cn/，下载最新的稳定版node.sj
   
   需要点击图片位置下载

2. 安装node.js
   双击下载下来的node-v14.15.5-x64.msi
   
   一路next
   
   
   注意这里选一个不带空格的文件夹安装
   
   这里记得勾选添加环境变量（如图这样就可以）
   
   勾选自动安装依赖
   
   点击install
   
   安装完毕后验证环境变量
   
   发现node.js已经加入环境变量，然后在cmd中输入node -v可以看到版本号正确

检查Vue版本

在命令行输入vue -V

查看版本在3.0以上即可，如果是3.0以下，则需要执行
npm uni -g vue-cli 卸载vue-cli
cnpm i -g @vue/cli重新安装cue-cli

使用WebStorm开发

打开WebStorm，点击File->New-Project

在弹出框里新建项目地址，然后确认nodejs位置是否正确

点击create，等待项目生成
生成完毕后的目录结构

可以在下方的Terminal中使用npm run serve查看是否可以正常启动
成功启动后可以看到项目的访问地址

通过浏览器访问vue项目

创建Vuetify项目

参考vuetify官网https://vuetifyjs.com/en/getting-started/installation/#vue-cli-install在WebStorm下方的Terminal输入（如果项目运行中则可以先ctrl + c停止）
vue add vuetify
命令行出现default的时候点击回车
出现下面的图则安装成功

使用vue ui进行项目配置
在命令行输入vue ui
在浏览器登录http://localhost:8000 点击创建

如图所示安装vuetify的插件

如图所示安装vue-router的插件

可以看到现在有一个新的项目（可能真正的步骤应该是直接键入vue ui来创建vue项目）

我们打开这个项目，可以看到router，views和components都已经建好了，比较像我们这正常的vue项目

由于之前使用vue ui创建时选择了vue3，报了 Error: You cannot call “get” on a collection with no paths. Instead, check the “length” property first to verify at least 1 path exists.
无法继续进行，修改为vue2后可以正常创建项目（github上确实有这个问题，建议的解决方案也是改为vue2，但是我记得我在另一个机器上是用的vue3创建的）
成功创建后目录结构为：

执行npm run serve可以看到http://localhost:8080

成功撒花~~