window下搭建vue开发环境


1.windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要到官网(http://nodejs.org/)或者Node.js中文网(http://nodejs.cn/),便可以看到下载页面。(PS:中文网与官网更新版本一致 翻译延迟大约在1-2天左右 在这里我就用中文网为例)


image.png

2.下载完成后双击运行进行安装,安装过程基本直接“next”就可以了(全部采用默认方式安装)。(windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如“C:\dev\nodejs”)。


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

image.png

如果没有出现版本提示,而是'node' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

则说明环境变量的配置有问题,我们需要到环境变量里面配置系统变量。在“用户变量”或“系统变量”中查找变量PATH路径,然后在下面加入你的node.exe文件所在的目录,例如我的是C:\dev\nodejs,配置完成后重启cmd即可


4.npm的安装。由于新版的NodeJS已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入”npm -v”来测试是否成功安装。如下图,出现版本提示便OK了。


image.png

5:配置npm的全局模块的存放路径以及cache的路径:例如我希望将以上两个文件夹放在NodeJS的主目录下,就在NodeJs下建立”node_global”及”node_cache”两个文件夹。如下图

image.png

启动cmd,输入

npm config set prefix "C:\dev\nodejs\node_global"

npm config set cache "C:\dev\nodejs\node_cache"

如果命令无法执行,也可以修改(C:\Users\Administrator)下面的.npmrc.txt文件,效果一样。输入

prefix=C:\dev\nodejs\node_global

cache=C:\dev\nodejs\node_cache

现在我们来装个模块试试,选择express这个比较常用的模块。同样在cmd命令行里面(管理员权限运行cmd(PS:这里我还是普通cmd模式没用管理员也成功了!)),输入


npm install express -g

(“-g”这个参数意思是装到global目录下,也就是上面说设置的“C:\dev\nodejs\node_global”里面。)。待cmd里面的安装过程滚动完成后,会提示“express”装在了哪、版本还有它的目录结构是怎样。如下图

image.png

如果你的cmd无法进行下载,说明你的npm环境变量还未配置,首先关闭cmd,在“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。如下图

image.png

1)进入环境变量对话框,在系统变量下新建”NODE_PATH”,输入”C:\dev\nodejs\node_global\node_modules“。


2)由于改变了module的默认地址,所以上面的用户变量都要跟着改变一下(用户变量”PATH”修改为“C:\dev\nodejs\node_global\”),要不使用module的时候会导     致输入命令出现“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。


环境变量配置完成后再重启cmd即可


6、使用npm淘宝镜像(cnpm):由于国内某种原因,导致使用npm下载速度很慢,你懂的,被墙。因此我们使用淘宝为我们提供的npm镜像(https://npm.taobao.org/


安装:命令提示符执行

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

测试是否安装成功

cnpm -v

如果cnpm -v 报错 ,说明是环境变量配置问题

1)、进入环境变量对话框,在系统变量下新建“NODE_HOME”,输入"C:\dev\nodejs\node_global"。

image.png

2)在系统变量下找到path路径,加入%NODE_HOME%

image.png

image.png

确认配置完成后,保存退出,再次打开cmd输入cnpm-v,如下

image.png

说明配置成功。


7、安装Vue脚手架(3.0),用于生成项目

cnpm install -g @vue/cli

     快速原型开发 编译.vue文件

cnpm install -g @vue/cli-service-global

  (可选)卸载之前已经安装过的新版本(非3.x)

npm uninstall vue-cli-g

 (可选)如果仍然需要使用旧版本的vue init功能,可以全局安装一个桥接工具拉取旧版本:

cnpm install -g @vue/cli-init

 由于vscode不支持vue语法的高亮,需要我们自主安装插件,在这里推荐vetur


脚手架安装完成后,我们可以单独 运行某个.vue文件,在cmd输入

vue serve 文件名

启动成功会得到以下提示

image.png

至此搭建vue的开发环境已结束。

评论 抢沙发

表情
  1. 来自广东广州(huangshaomo)用户的评论:2019-10-13 17:09:03
    (#1)

首页上一页12下一页尾页