一、Node.JS的安装
参考此篇文章,https://blog.csdn.net/WHF__/article/details/129362462。其中需要修改的步骤,评论有人已经指出来了:
1.步骤四开始前,首先确定自己是使用管理员身份运行的cmd窗口,进行命令行输入的;其次,修改一下【node_global】和【node_cache]的权限。
步骤: 鼠标右击【node_global】的文件夹,点击【属性】,再点击【安全】,再点击【编辑】,将权限都勾上,随即点击【确定】即可,【node_cache】步骤同理。
2.步骤四,全局安装一个最常用的 express 模块进行测试的命令,换成 npm install -g express。
3.步骤五安装淘宝镜像,安装cnpm,使用命令:npm install -g cnpm。测试是否成功,需要重新打开命令提示符窗口,再输入测试命令。
二、Vue的安装
参考Vue安装及环境配置、开发工具_袁小萌同学的博客-CSDN博客,同时也是对node安装遗漏的梳理和补充。
其间,由于我第一次做的vue项目“my_vuecesium”里,是vue+cesium,cesium直接显示在vue的div窗口中,但是窗口边框美观度实在是有限,还需要引入其他组件,但是基本引入失败。项目中没有安装router环境,所以我决定新建一个vue2项目试试。
于是,重新创建vue2,我从安装vue2开始。
好像每次重开的时候不需要重新安装。如果重新安装可能会出现问题,比如webpack出现问题。现在不知道如何去办了。为此我又重新安装了webpack,但是webpack可以不全部换的,上面这篇文章的评论区,有友人回答了我这个问题:说可以在所创建的项目中,分别安装webpack,这样项目之间是互相不干扰的。
查看vue版本信息:
npm list vue显示empty解决办法_前端小小怪的博客-CSDN博客
重新按照指定版本安装vue2,但是好像vue2没变,其实还是vue3。然后脚手架vuecli按照指定版本的命令安装了,vuecli2.9.6的版本,于是创建出来的项目还真的就是vue2的,取名为“myvue2”。确实引入datav成功了,但是我没法把cesium引入到datav绚丽的组件框里面,不知道是什么问题,提示cesium未定义。
现在我再重新创建vue3新项目“myvue3”,看看能不能引入cesium。会不会是cesium版本太高了,与webpack不匹配?具体也不清楚。这一节的第一篇文章评论,有提到说是可以给每个文章安装不一样的webpack。
现在就来操作,结果新建项目失败。说是vue3.3.4和vue-template-compiler2.7.14的版本不匹配,如下图。这个vue-template-compiler2.7.14是vuecli里面的,也就是更新vuecli就可以解决问题才对。
跟着网友试了很多种方法:
第一种:更新vuecli。卸载vuecli,重装对应版本的vuecli,但是这个vue-template-compiler还是2.7.14,也就是它貌似是植入在每一个版本的vuecli的。
第二种:更新vue-template-compiler的版本到3.3.4。先卸载,在安装。方法来源于这篇文章以及其他相关文章,这也是搜到的大多数结局方案。
很可怕,安装居然提示这个vue-template-compiler3.3.4不存在,没这个版本,我去npm官网看了淘宝镜像,好像只更新到2.7.14。那为啥第一个项目的时候就成功了。真的很绝望啊怎么会这样。也就是这成了四局了。
于是我找到了第三种解决方法:意思是强制覆盖vuecli,然后真的成功了。
npm install -g @vue/cli --force 可以强制覆盖
一查看vuecli的版本,居然是vuecli5.0.8.然后看B站之前跟着学的vue视频,才发现根本就不用vue和vuecli装同级的版本!也就是说我第一次建立vue3项目的时候,就装的是vuecli5的版本。
PS D:\VueProject3> vue -V
@vue/cli 5.0.8
npm vue 安装过程中遇到npm ERR! errno -17-CSDN博客
然后试验vue2项目的时候,把vue和vuecli都改成2.X的了;后来创建第三个vue3的时候,装了vue3和按照普通语句装了vuecli,但是好像无论如何都带来的是vue-template-compiler2.7.14。最后用强制覆盖才能得到最新的vuecli以及它里面的vue-template-compiler。
三、Vue项目的创建
有时候上一步中,用npm install vue-cli -g安装完脚手架后,还是2的版本,然后在cmd创建新的vue项目的时候,会提示你:
重新安装后,即可创建Vue项目。
四.cesium引入vue3.
有很多种不同的方式,第一次创建的时候,是根据B站的几个收藏的视频引入的。这里总结了不同的方法,和视频中有重合的部分。vue3 cesium安装配置教程(共5种方式-推荐第3-4种)_vue3 ceisum_LEILEI18A的博客-CSDN博客
然后第二次用了较为简单的引入方式,下面将详细记录这次的引入过程。