Vue项目环境搭建并运行

一、安装node.js

1.官网下载：Node.js 

2.安装node，双击运行下载的node-v14.17.3-x64.msi文件即可，然后点击next执行。

（安装目录建议安装在D盘，再定义一个nodejs的上层目录，因为还有两个文件夹）

3. 检测是否安装成功，进入cmd，如下图即为成功。

4.配置npm在安装全局模块时的路径和缓存cache的路径.。

1、node.js我安装在C盘，全局模块路径配置在了D盘，如下图：

2、依次执行 如下命令

npm config set prefix "D:\ProgramFiles\nodejs\node_global"
npm config set cache  "D:\ProgramFiles\nodejs\node_cache"

3、修改用户变量

4、修改用户的环境变量如下图。

 

5、系统变量中新增NODE_PATH变量

6、path中新增系统node环境变量，便于任何目录皆可使用使用cnpm、vue等命令，而不需要输入全路径。

5. 安装淘宝镜像，解决依赖下载时网速慢的问题，执行如下命令即可安装。     

npm install -g cnpm --registry=https://registry.npm.taobao.org 

 二、安装Vue

1.执行命令，cnpm install vue -g，然后重新打开下cmd窗口，否则可能提示cnpm命令不存在的错误。

2.安装vue脚手架，cnpm install vue-cli -g，便于快速搭建vue项目。

3.创建一个项目并运行

1、进入你要创建项目的目录，执行如下命令

vue init webpack myvue

      如图所示，可能构建过程比较慢，耐心等待。。。 

2、进入项目目录，下载依赖，输入命令，

（如果cnpm命令无法执行，以管理员身份打开PowerShell 输入 set-executionpolicy remotesigned（设置执行策略远程签名）即可）

npm install
或者
cnpm install
或者
cnpm i

 

3、运行项目，执行如下命令，

npm run dev

    出现该页面表明成功启动

 

PS：如果项目运行中常见问题解决可参考
npm安装依赖过程中报错：Error: Can't find Python executable "python", you can set the PYTHON env variable - 飞翔的蜗牛~ - 博客园

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_bin_浮生离梦的博客-CSDN博客

无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次 - 忘掉过去式的专栏 - TNBLOG