一、创建Vue项目
1、使用vue --version命令检查本地是否有vue-cli脚手架
(1)命令提示本地没有vue-cli脚手架,使用npm install -g @vue/cli全局下载脚手架;
由于node的服务器在国外,这里下载的速度可能会有点慢,建议使用npm config set registry registry.npmmirror.com/切换其他镜像源地址,切换完成之后可以使用npm get registry检查当前镜像源地址。
(2)我的问题开始了:下载完成后再次查看vue-cli的版本,发现还是未安装的状态?
于是我很懵,怎么会这样?明明前面的信息提示已经下载完成了,但是还是无法查看到当前vue-cli的版本?
抱着迷惑的心情,我默默使用管理员身份打开了命令窗口,果然,可以正常查看vue-cli:
给爷整懵了?为什么用普通身份下载的东西要用管理员身份才能查看?难道java那些也不能用普通身份查看吗?还是因为是用node下载造成的?
what's more,无论是普通身份还是管理员身份,使用npm list -g 查看node下载过的工具的时候,都可以看到@vue/cli。
于是使用普通身份到node的下载目录node_cache中,可以正常找到@vue/cli。
求大佬解答一下,有点不明白,为什么用普通身份全局下载的东西要管理员身份才可以直接查看?
2、使用脚手架创建vue项目
(1)根据上文的信息,使用管理员身份进入你想要存储项目的文件夹,可以使用vue --help查看vue的相关命令;
(2)使用vue create命令创建vue项目,create后面跟项目名称,不写项目名称会报错;
(3)根据提示运行项目,得到本地和网络两个地址,复制到浏览器中打开;
(4)成功打开vue项目;
(5)也可以使用VSCode打开刚才创建的项目,左侧的目录栏就是vue-cli脚手架的默认配置,可以在package.json文件中查看项目的目录,可以发现笔者这里的项目的vue3的。
二、创建React项目
1、使用Create React App创建React项目
(1)根据Create React App官方文档提示,在本地使用脚手架时,需要保证node版本在14以上,npm版本在6以上,可以使用node -v查看当前node版本;
如果当前node版本低于14,推荐使用nvm来切换node版本;
(2)在想要存储项目的文件夹下打开命令窗口(这里不需要管理员身份,因为node是可以全局使用的),使用npm init react-app react_project_name创建空项目;
(3)根据提示进入项目,npm start启动项目;
(4)默认选择谷歌浏览器打开项目;
(5)同样的,可以在package.json项目中查看到对应的项目信息;
三、脚手架的作用
依上文所述,创建项目的方式还算easy,且这两种创建项目的方法均运用了脚手架。这不禁使我陷入思考:为何要借助脚手架来创建项目?如果不使用脚手架,又该如何创建项目呢?