文章目录

  • 前言
  • 一、安装Node.js
  • 二、配置淘宝镜像
  • 安装cnpm,将npm设置为淘宝镜像:
  • 二、安装vue/cli
  • 检查是否安装成功: vue -V 或者 vue --version ![在这里插入图片描述](https://s2.51cto.com/images/blog/202404/01051632_6609d2b0a43a330812.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
  • 三、 创建一个vue项目
  • 安装过程中出现的问题(我自己的解决方法)



前言

安装Vue脚手架之前,要先安装node.js配置环境


一、安装Node.js

1.搜索node.js官网下载自己对应版本 https://nodejs.org/

node_modules里的包怎么导入 node modules安装_安装过程


2.打开文件双击安装,一直点next。安装目录可以更换成自己的目录,最后点击install安装完毕。

node_modules里的包怎么导入 node modules安装_命令提示符_02


node_modules里的包怎么导入 node modules安装_命令提示符_03


node_modules里的包怎么导入 node modules安装_node_modules里的包怎么导入_04


3.进行node环境配置

1)win键+R 输入cmd,打开命令提示符,检查node版本,输入 node -v 检查npm版本 输入 npm -v

node_modules里的包怎么导入 node modules安装_vue_05


node_modules里的包怎么导入 node modules安装_前端_06


2)配置npm的全局模块的存放路径、cache的路径

首先在自己安装node目录下新建 node_cache 和 node_global 两个文件

node_modules里的包怎么导入 node modules安装_安装过程_07


接着在命令提示符窗口运行:

npm config set prefix “D:\Program Files\nodejs\node_global”

npm config set cache “D:\Program Files\nodejs\node_cache”

node_modules里的包怎么导入 node modules安装_node_modules里的包怎么导入_08

3)环境变量配置

首先:我的电脑==》 右键点击属性===》高级系统设置===》高级===》环境变量

node_modules里的包怎么导入 node modules安装_vue_09


接着:在 系统变量 新建===》

NODE_PATH

D:\Program Files\nodejs\node_global\node_modules(自己安装目录下)

node_modules里的包怎么导入 node modules安装_命令提示符_10


然后:系统变量 编辑path===》

D:\Program Files\nodejs

%NODE_PATH%

node_modules里的包怎么导入 node modules安装_前端_11

node_modules里的包怎么导入 node modules安装_命令提示符_12


最后:用户变量 编辑path ===》

D:\Program Files\nodejs\node_global

node_modules里的包怎么导入 node modules安装_命令提示符_13

二、配置淘宝镜像

安装cnpm,将npm设置为淘宝镜像:

建议在管理员权限下安装

安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
设置
npm config set registry https://registry.npm.taobao.org

可以用 cnpm -v检查cnpm是否安装好

node_modules里的包怎么导入 node modules安装_安装过程_14

二、安装vue/cli

用cnpm安装速度快点

cnpm install -g @vue/cli

注意:如果安装过程一直不动,可以敲下回车

检查是否安装成功: vue -V 或者 vue --version

node_modules里的包怎么导入 node modules安装_node_modules里的包怎么导入_15

三、 创建一个vue项目

  • 在要创建工程的目录下输入 :vue create 项目名
  • 按照提示进入工程目录:cd 项目名
  • 按照提示运行项目:cnpm run serve

安装过程中出现的问题(我自己的解决方法)

Q:vue create 项目名 创建的时候一直卡住不动
A:设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

Q:创建项目时:command failed: npm install --loglevel error --legacy-peer-deps

node_modules里的包怎么导入 node modules安装_安装过程_16


A:用管理员权限进cmd,cd 项目文件夹,再进行创建项目可行

右键 开始 图标

node_modules里的包怎么导入 node modules安装_命令提示符_17


node_modules里的包怎么导入 node modules安装_安装过程_18


Q:检查是否安装成功cnpm出现的问题

cnpm : 无法加载文件 D:\Program Files\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 http

s:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

node_modules里的包怎么导入 node modules安装_前端_19


A:管理员身份进入命令窗口

node_modules里的包怎么导入 node modules安装_前端_20

set-ExecutionPolicy RemoteSigned

Y

cnpm -v

node_modules里的包怎么导入 node modules安装_node_modules里的包怎么导入_21