因为本机环境太乱所以将环境搬到虚拟机里。写博客记录一下！防止以后忘记了。写vue项目的时候总是报错，查了半天后怀疑是之前的vue版本没卸载干净又重装了新的，问题还是没解决。然后环境乱七八糟又没能力整理。想重装系统又太麻烦，所以试试虚拟机中搭建环境，查了一下似乎可行，开干！
搭建虚拟机
一、前期准备
1.1 考虑需求。
搭建vue环境需要安装多少软件，预留多少存储空间。再根据个人需要分配性能。
1.2 虚拟机系统装在固态硬盘内会很流畅，装在机械硬盘里可以使用但是可能会卡。
二、下载镜像
到微软镜像网站https://next.itellyou.cn/上下载系统镜像。
三、安装镜像
这里参考
VM虚拟机安装篇·VMware Workstation Pro（虚拟机）安装Win10操作系统（图文介绍超详细）
作者：weixin_47153668
3.1 打开VMware Workstation
3.2 点击创建虚拟机，选择稍后安装。
3.3 选择windows系统
（注：因为虚拟机无法识别，需要手动选择系统类型，因为我下载的是win10镜像，所以这里选择Microsoft windows。下载linux镜像选择linux选项即可，其他同理）
3.4 命名和选择安装路径。毕竟是搭建vue环境的虚拟机，为了方便直接命名vue。需要提前考虑安装空间（注：尽量装在固态硬盘的盘里）
3.5 分配虚拟机磁盘空间。这里我选择40G是因为搭建vue只用来学习，然后固态空间也不多了。选择将虚拟磁盘拆分成多个文件方便以后移动虚拟机。
3.6 分配硬件性能。
3.7 内存根据需求分配，同时参考软件推荐的内存。默认就行，不够再改。
3.8 网络适配器默认没改。
3.9 选择CD/DVD 将下载好的系统镜像打开
点击完成。点播放虚拟机打开。
3.10 界面出现后马上按下tab键（注意，鼠标点进虚拟机，且在一秒内按下）
否则则会报错Time Out
3.11 虚拟机安装完成
接下来一步步安装即可（这里不多介绍，按平时正常装就行）
搭建vue环境
参考：
Vue CLI配置原理详解------- 作者：佐宗
Node.js安装及环境配置之Windows篇--------- 作者周瑜周
四、安装Node.js
打开官网下载链接:https://nodejs.org/en/download/
打开文件
next
选安装路径（根据个人需求）
默认即可（没细看，跟着大佬走）
next
安装完成
1.验证node.js安装
打开cmd窗口，输入node -v，输入npm -v。（node+空格+ -v）
安装后的node.js文件夹如下
2.node.js环境配置（本节可跳过）
说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
（注：本小节照搬上面引用的作者：周瑜周 写的，他为了节省空间把node.js安装到D盘里了，本篇是装虚拟机里所以就把node.js安c盘默认文件夹里了。我copy过来是为了记住模块的默认文件夹-0-）
例如：我希望将全模块所在路径和缓存路径放在其他盘的node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：
噗，看到他这篇博客下的评论，我终于知道我原来电脑的vue环境为啥老出问题了！之前就是按照这篇博客什么都跟着人家走，然后没看评论。他这个改模块安装的默认路径好像真有点问题，建议萌新别学！
五、替换淘宝源
引用： 使用cnpm代替npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
因为原来的npm命令从国外网站下载模块太慢了，用国内的镜像网站替换一下。具体内容点文章链接
六、webpack全局安装
安装webpack
6.1 （警告！错误示范！6.1小节所有操作都是栽了跟头，请直接跳到6.2！）
打开cmd输入：
cnpm install webpack -g
执行后如下：
执行 webpack -v 检查一下是否安装成功
额，成功了但是没完全成功，提示我要安装webpack-cil。这里输入no，我怕太慢，用cnpm安装好了。
输入webpack -v 查看，结果出问题了，查不到webpack的版本。只有webpack-cli的
不知道哪有问题，先卸载webpack看看吧。
参考： webpack卸载的正确方式详细步骤
输入npm uninstall webpack -g 卸载成功。
打开cmd。输入四次指令卸载掉webpack和webpack-cli，全局到局部。
npm uninstall -g webpack
npm uninstall webpack
npm uninstall -g webpack-cli
npm uninstall webpack-cli
6.2 关掉cmd，使用管理员模式打开cmd。
输入：
cnpm i webpack -g
cnpm i webpack-cli -g
安装成功后输入webpack -v查看
安装webpack及webpack-cli成功！
总结：用管理员模式打开cmd安装webpack。咱也不知道为啥。
七、安装cli
7.1打开cmd，输入：
cnpm install -g @vue/cli
7.2安装成功后检查版本，输入vue -V （V大写）
7.3安装完成后初始化vue项目
cmd输入：
vue ui
打开vue图形化管理器
创建项目并运行
至此环境配置成功。
磁盘占用20G。（我还下了个vscode，忘了多大了，应该不到2G）
总结
第一次写博客记录，如有错误还请轻喷。
虽然是全程跟着大佬走的，但还是有不少地方出问题。好在最后都解决了。
准备下篇捣鼓（到处copy）怎么通过宿主机访问虚拟机运行的vue项目。