win7 搭建安装nodejs 以及vue+webpack环境

时间:2024-03-19 11:00:12

一、nodeJS

1、登陆官网(http://nodejs.org/),首页的“INSTALL”按钮,直接点击就会自动下载安装,

win7 搭建安装nodejs 以及vue+webpack环境

2、安装"next" ,可以修改安装路径,我的选择安装路径:D:\nodejs,安装完会自动添加path的系统变量,变量值是你的安装路径,比如我的安装路径:D:\nodejs

win7 搭建安装nodejs 以及vue+webpack环境

3、cmd(win+r然后输入cmd进入)测试下是否安装成功。方法:在cmd下输入node -v,出现下图版本提示就是完成了NodeJS的安装。

win7 搭建安装nodejs 以及vue+webpack环境

4、配置npm的全局模块,在NodeJS的主目录下分别创建node_global、node_cache目录,

win7 搭建安装nodejs 以及vue+webpack环境

cmd下输入npm set prefix “D:\nodejs\global“和npm set cache “D:\nodejs\cache“; 
(斜体内容为你自己的文件路径)

5、配置全局环境变量

关闭cmd,打开系统对话框,“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。如下图

win7 搭建安装nodejs 以及vue+webpack环境

在系统变量下新建"NODE_PATH",输入”D:\nodejs\global“。

6、cmd命令行里面,输入“npm install express -g”(“-g”这个参数意思是装到global目录下,上面设置的“D:\nodejs\global”里面),开启cmd命令行,进入node,输入“require('express')”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图

win7 搭建安装nodejs 以及vue+webpack环境

二、npm的安装。

新版的NodeJS已经集成了npm,安装nodeJS完成后npm也一并安装好了。cmd命令窗口行输入"npm -v"来测试是否成功安装。如下图出现版本,则OK

 

win7 搭建安装nodejs 以及vue+webpack环境

三、vue 环境搭建

在nodeJS,npm环境搭建的前提下,才可以搭建vue开发环境;

1、许多npm包都是在国外被墙不好安装,这用淘宝的镜像服务器,来对我们依赖的module进行安装。

2、cmd输入命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org  回车等待

3、cnpm install -g vue-cli,回车,等待安装全局的vue-cli脚手架,搭建所需的模板框架

4、cmd输入vue 如图安装成功

win7 搭建安装nodejs 以及vue+webpack环境

5、新建一个项目文件夹(如:fonts),cmd  doc切换到当前文件夹,输入:vue init webpack project(项目文件夹名),回车,可按下图操作:

win7 搭建安装nodejs 以及vue+webpack环境

win7 搭建安装nodejs 以及vue+webpack环境

安装完成,参考:https://blog.csdn.net/qq_33327325/article/details/82953687

6、切换到项目目录,执行测试,如图:

win7 搭建安装nodejs 以及vue+webpack环境

回车后,如图有测试路径:http://localhost:8081 成功

win7 搭建安装nodejs 以及vue+webpack环境