node 前端初学安装步骤

wanniang

59人浏览 · 2023-07-30 11:59:36

wanniang · 2023-07-30 11:59:36 发布

手前端vue准备：原文请看，仅做学习使用

http://t.csdn.cn/Ldsdo

这篇关于在Visual Studio Code上搭建vue开发环境的超详细教程手把手教会你!

首先在Visual Studio Code上搭建vue开发环境有几个步骤：

1、下载安装node.js

2、安装npm

3、安装cnpm

4、安装vue/cli脚手架

5、创建vue项目

6、运行vue项目

1.下载安装node.js
地址：node.js官网下载

打开 Visual Studio Code打开终端如下图:

在终端输入以下命令行

检查node.js是否安装成功

node -v
2.安装npm
检查npm是否安装成功

npm -v

注：因为在node.js上自带了npm包可以使用，所以这里不需要在另外下载。

3.安装cnpm
使用命令行安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

注：这里可能遇到问题，PowerShell用于控制加载配置文件和运行脚本的条件，为了防止恶意脚本的执行，可能遇到无法运行脚本的问题；

解决办法：可以通过修改PowerShell执行策略来解决；

步骤：win键搜索Power Shell并以管理员身份运行，在输入框输入以下代码Enter，键入Y修改执行策略即可；

详细步骤:

(1)右键开始,选择Windows PowerShell管理员.

(2)输入以下代码,键入Y修改执行策略即可；

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine

检查是否修改成功

Get-ExecutionPolicy -List
出现如下字样则修改执行策略成功

~~~ 使用命令行安装cnpm ~~~

npm install -g cnpm --registry=https://registry.npmmirror.com
检查cnpm是否安装成功

cnpm -v
4.安装vue/cli脚手架

在终端面板输入以下语句执行

cnpm install -g @vue/cli
效果:

然后输入以下语句查看脚手架是否安装成功；

vue -V
5.创建vue项目
vue create vue-01
连续敲下回车，创建项目，也可以按键盘上下键配置项目。

注：vue-01 是项目名称。

6.运行vue项目
进入项目

cd vue-01
运行项目

npm run serve
当终端上出现如图所示样式，则表示项目运行成功；

此时按住键盘Ctrl键配合鼠标左键可以在浏览器打开项目；

（注意：）

要删除淘宝镜像并恢复为官方npm源，请按照以下步骤操作：

1. 删除淘宝镜像配置

打开终端或命令行工具，

要删除淘宝镜像并恢复为官方npm源，请按照以下步骤操作：

1. 删除淘宝镜像配置

打开终端或命令行工具，执行以下命令：

npm config get registry
npm config delete disturl

暗色

复制

npm config delete registry npm config delete disturl

这将移除淘宝镜像的相关配置123。

2. 验证配置是否删除

检查当前镜像源地址：

npm config get registry

如果返回 https://registry.npmjs.org/，则表示已成功恢复为官方源45。

3. （可选）手动编辑配置文件

如果上述命令无效，可手动编辑.npmrc文件：

找到用户目录下的 .npmrc 文件（如 Windows 的 C:\Users\你的用户名\.npmrc）
用文本编辑器打开，删除包含 registry 和 disturl 的行
保存文件

4. 测试npm功能

尝试安装一个包来验证是否正常：

npm install express

如果安装成功且速度正常，则说明淘宝镜像已成功删除5。

注意事项

删除淘宝镜像后，npm将使用官方源下载包，国内网络环境下速度可能较慢
如需临时使用淘宝镜像，可使用临时命令：
暗色

复制

npm --registry https://registry.npmmirror.com install <package-name>
如果之前全局安装了 cnpm，可保留无需删除，不会影响npm正常使用3