安装Node&修改Node镜像地址&搭建Vue脚手架&创建Vue项目

妖狐艹你老母 2024-03-08 07:52 49阅读 0赞

##### 1、安装VSCode和Node #####

下载VSCode [Visual Studio Code - Code Editing. Redefined][]

下载Node [Node.js (nodejs.org)][Node.js _nodejs.org]

检验是否安装成功，**Win+R**,输入**cmd**命令，使用**node -v**可以查看到其版本号

![db5e384661ee4c32a75c92c890f09d1a.png][]

##### 2、修改镜像地址 #####

安装好node之后，开始修改镜像地址

npm install --location=global --registry=https://registry.npm.taobao.org

![ae59b5e30f264b02a693a5fe5b72583b.png][]

如果出现以上报错情况，执行命令（两者二选一，建议使用第二个）

npm init -f

或

npx nrm use taobao

![0fbff2619c0a47279f24b3e65efb6936.png][]

![f9f360409de74e9484d01b60cc4cfcd0.png][]

再执行一次修改镜像地址命令

npm install --location=global --registry=https://registry.npm.taobao.org

![2e79f7de10144a6d9c99ded5139b1ec7.png][]

查看当前的镜像地址

npm config get registry

出现npmmirror就是taobao的镜像地址，即修改成功

![62ea443efed1441a885bb25310b1b0da.png][]

##### 3、安装脚手架 #####

\-g: 全局安装

npm install -g @vue/cli

cli 是Command Line Interface的简称，为命令行界面，俗称脚手架  
查看vue的版本号

vue --version

![9b41032073744dc88d4c7cd9c623d7fa.png][]

##### 4、创建项目 #####

在VSCode新建一个文件夹，作为源代码目录，右键选择**在集成终端中打开**。在右下部控制台处输入**cmd**进入dos模式

![909f5ee65545497786b02593f76fb91f.png][]

新建项目

vue create 项目名称

选择vue3版本，等待系统初始化完成，出现以下内容即成功

![6b0d2454e62d4be4bbf4919c0eda4357.png][]

进入刚创建的项目目录

cd 项目名称

执行命令

npm run serve

执行成功后，到浏览器输入命令窗口中Local 命令或者Network的地址

http://localhost:8080
    或
    http://192.168.43.117:8080

![182a8bbf119a4447b875343375f0893e.png][]

如果出现以下情况

![31781d4d54c04fba912d83199178f1ee.png][]

解决方法一

运行命令行窗口，进入项目目录存放位置，再依次执行以下命令，如果还不行，执行方法二

vue create 项目名称
    
    cd 项目名称
    
    npm run serve

解决方法二

退出VSCode,右键点击VSCode,选择**属性**，**兼容性**，勾选**以管理员身份运行此程序**，**应用**

![45af3d499bab40f59e1b7a3499294a85.png][]

再执行

vue create 项目名称
    
    cd 项目名称
    
    npm run serve

完成

![9705e5f194eb4bdb90120493830ca21b.png][]

[Visual Studio Code - Code Editing. Redefined]: https://code.visualstudio.com/
[Node.js _nodejs.org]: https://nodejs.org/en
[db5e384661ee4c32a75c92c890f09d1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/a08be3bf9fc640a9b8ed9405a4a3575e.png
[ae59b5e30f264b02a693a5fe5b72583b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/d5afdba5b110487496639cd4e0ddb1b6.png
[0fbff2619c0a47279f24b3e65efb6936.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/a2a4e9aef69e4a56802625c240af5357.png
[f9f360409de74e9484d01b60cc4cfcd0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/9d1741dec3424a6593ebe222f4a7575c.png
[2e79f7de10144a6d9c99ded5139b1ec7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/75f1ffdae31e4c369cace024c512ce8a.png
[62ea443efed1441a885bb25310b1b0da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/48316fcb92b748a9a16658dacad200cd.png
[9b41032073744dc88d4c7cd9c623d7fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/bf5a721145464a05ab8bb832cc70eaa3.png
[909f5ee65545497786b02593f76fb91f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/935c27f3ca4e4cf6a36fa37a198d9afd.png
[6b0d2454e62d4be4bbf4919c0eda4357.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/612aaaca3c3d4d86ac76789d7980d28c.png
[182a8bbf119a4447b875343375f0893e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/22f92e4a43154230bbcfc405b6065b50.png
[31781d4d54c04fba912d83199178f1ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/8aed72f2109e42c09dc41cb3c10ce5a0.png
[45af3d499bab40f59e1b7a3499294a85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/b8e0f7c9b53c4921858d111a2c717027.png
[9705e5f194eb4bdb90120493830ca21b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/9a72dccabe2f476a89abf2d92d83515c.png