windows环境搭建node.js Vue开发环境

windows环境搭建Vue开发环境


一:安装node.js

下载地址:

官网:https://nodejs.org/en/download/

所有版本:https://nodejs.org/en/download/releases/

下载完毕后,可以安装node,建议不要安装在系统盘(如C盘下)

双击node-v9.6.1-x64 运行,安装方式如下图:

image.png windows环境搭建node.js Vue开发环境 云技术 1

image.png windows环境搭建node.js Vue开发环境 云技术 2

image.png windows环境搭建node.js Vue开发环境 云技术 3

image.png windows环境搭建node.js Vue开发环境 云技术 4

image.png windows环境搭建node.js Vue开发环境 云技术 5

image.png windows环境搭建node.js Vue开发环境 云技术 6

二、设置nodejs prefix(全局)和cache(缓存)路径

1、在nodejs安装路径下,新建node_global和node_cache两个文件夹

image.png windows环境搭建node.js Vue开发环境 云技术 7

2、设置缓存文件夹

npm config set cache "D:\77isp\nodejs\node_cache"

设置全局模块存放路径

npm config set prefix "D:\77isp\nodejs\node_global"

image.png windows环境搭建node.js Vue开发环境 云技术 8

三、基于 Node.js 安装cnpm(淘宝镜像)

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

四、设置环境变量(必须做)

右键计算机属性-->高级系统设置-->高级-->环境变量

image.png windows环境搭建node.js Vue开发环境 云技术 9

image.png windows环境搭建node.js Vue开发环境 云技术 10

新建一个变量名NODE_PATH

变量值:D:\77isp\nodejs\node_modules; 

image.png windows环境搭建node.js Vue开发环境 云技术 11

编辑PATH变量

image.png windows环境搭建node.js Vue开发环境 云技术 12

在最后增加;D:\77isp\nodejs\node_global;

image.png windows环境搭建node.js Vue开发环境 云技术 13

然后确定保存好即可

五、安装Vue

cnpm install vue -g

image.png windows环境搭建node.js Vue开发环境 云技术 14

六、安装vue命令行工具,即vue-cli 脚手架

cnpm install vue-cli -g

image.png windows环境搭建node.js Vue开发环境 云技术 15

这样环境就已经安装完毕了,下面咱来测试一下

七、新项目的创建

cd到新创建的项目文件夹下

image.png windows环境搭建node.js Vue开发环境 云技术 16

创建新项目

vue init webpack-simple mytest

image.png windows环境搭建node.js Vue开发环境 云技术 17

安装工程依赖模块

cnpm install

image.png windows环境搭建node.js Vue开发环境 云技术 18

运行该项目

cnpm run dev

image.png windows环境搭建node.js Vue开发环境 云技术 19

image.png windows环境搭建node.js Vue开发环境 云技术 20

测试成功!

上一篇:

下一篇:

相关文章

联系我们

13013945671

在线咨询:点击这里给我发消息

邮件:wangyun@94ip.com

地址:江苏徐州鼓楼区和信广场二期C座4层

QR code
您好,欢迎咨询