Vue环境搭建及node安装过程整理

时间：2022-07-18 14:52:07

一、nodejs的安装

Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。

Vue环境搭建及node安装过程整理

我们可以根据不同平台系统选择你需要的Node.js安装包。Node.js 历史版本下载地址：https://nodejs.org/dist/

这里演示的是Window64位安装Node.js，下面演示的是采用安装包的方式来安装。

1、Windows 安装包(.msi)

Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录，并点击 next（下一步）：

Vue环境搭建及node安装过程整理

:点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：

安装完之后启动cmd依次执行以下两条命令检测是否安装成功，结果如下：

Vue环境搭建及node安装过程整理

二、node.js的环境变量的新建。  //我安装的路径是 D:\soft\nodejs

其实安装完node，就自动在path里增加环境变量，但是为了以后的本地部署项目，我们需要找到node.js的安装根目录，在当中新建“node_global”和"node_cache"两个文件夹。

1、 启动cmd依次执行以下两条命令

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

2、 设置环境变量

　　说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

　　1．鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

　　2．点击环境变量弹出下列对话框：

　　3．新增系统变量NODE_PATH：把变量值设置成“D:\soft\nodejs\node_global\node_modules” （这样就可以把后面全局安装的装到global里并且可以直接用命令使用。）

4． 修改用户变量PATH：选中PATH，点击编辑，把“D:\soft\nodejs\node_global;”加到前面

三、安装淘宝的npm镜像

　　输入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

　　这个其实看个人爱好吧，因为npm在国内下载速度是很慢，所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。

四、安装全局vue-cli脚手架、webpack

命令输入

　　cnpm install vue –g  //全局安装vue

　cnpm install -g vue-cli                        //全局安装vue-cli

　　cnpm install -g webpack                          //全局安装webpack

cnpm install -g webpack-dev-server             //安装webpack的本地webserver

　　安装完成后，vue-cli脚手架其实就已经把vue也装掉了，所以只需输入vue  -V 和 webpack  -v  等等就可以查看安装成功与否。

下面是以上命令的结果:

$ npm install vue -g

E:\nodejs\node_global

`-- vue@2.4.

$ npm install -g vue-cli

E:\nodejs\node_global\vue-init -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-init

E:\nodejs\node_global\vue-list -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-list

E:\nodejs\node_global\vue -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue

E:\nodejs\node_global

`-- vue-cli@2.9.

  +-- async@2.5.

  | `-- lodash@4.17.

  +-- chalk@2.1.
　.....  此处省略很多结果数据 .....

$ npm install webpack -g

E:\nodejs\node_global\webpack -> E:\nodejs\node_global\node_modules\webpack\bin\webpack.js

> uglifyjs-webpack-plugin@0.4. postinstall E:\nodejs\node_global\node_modules\webpack\node_modules\uglifyjs-webpack-plugin

> node lib/post_install.js

E:\nodejs\node_global

`-- webpack@3.7.

  +-- acorn@5.1.

  +-- acorn-dynamic-import@2.0.

 .....此处省略多行数据.......

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0. (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

$ npm install -g webpack-dev-server


E:\nodejs\node_global\webpack-dev-server -> E:\nodejs\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js

E:\nodejs\node_global

+-- UNMET PEER DEPENDENCY webpack@^2.2. || ^3.0.

`-- webpack-dev-server@2.9.

  +-- ansi-html@0.0.

  +-- array-includes@3.0.

.....此处省略多行数据......

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0. (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN webpack-dev-server@2.9. requires a peer of webpack@^2.2. || ^3.0. but none was installed.

npm WARN webpack-dev-middleware@1.12. requires a peer of webpack@^1.0. || ^2.0. || ^3.0. but none was installed.

相关文章