【前端工具】nodejs+npm+vue 安装（windows）

喜欢ヅ旅行 2022-12-12 15:06 186阅读 0赞

# 预备 #

先看看这几个是干嘛的，相互的关系是啥。  
nodejs是语言，类比到php。  
npm是个包管理，类比到composer。  
vue是个框架，类比到laravel。  
webpack是个打包工具。

## 先下载nodejs ##

不会有人不知道下载地址吧，不会吧不会吧。  
不会就去百度吧。。。  
这里先默认你已经下载安装好了。

![在这里插入图片描述][20201007205755807.png_pic_center]

## 配置一下 ##

配置镜像站
    npm config set registry=http://registry.npm.taobao.org 
    配置目录到D盘
    npm config set prefix "D:\nodejs\node_global"
    npm config set cache "D:\nodejs\node_cache"
    增加环境变量
    NODE_PATH 内容是：D:\nodejs\node_global\node_modules

## 安装vue ##

npm install vue -g
    -g是指安装到global全局目录去
    npm install vue-router -g
    npm install vue-cli -g
    path环境变量添加D:\nodejs\node_global

测试一下，注意V是大写  
![在这里插入图片描述][20201007210056801.png_pic_center]

## 创建项目 ##

vue init webpack vueTest

![在这里插入图片描述][20201007210356889.png_pic_center]

npm run build

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5X3RlZW1v_size_16_color_FFFFFF_t_70_pic_center]

[20201007205755807.png_pic_center]: /images/20221123/01a03319d9114be2ae696cc25141ba95.png
[20201007210056801.png_pic_center]: /images/20221123/da5c620b1262499fae23477578a6a175.png
[20201007210356889.png_pic_center]: /images/20221123/3f0e7d772bd14aa0a9c07eb29d44808c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5X3RlZW1v_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/93f2580c1d054ab6b0514d2f5fae90bb.png