Nodejs的安装以及Vue脚手架的搭建

「已注销」

已于 2024-01-25 20:09:32 修改

阅读量1.3k

点赞数 29

文章标签： vue.js 前端前端框架

于 2023-12-23 12:05:39 首次发布

本文链接：https://blog.csdn.net/weixin_67366454/article/details/135165065

版权

前言：Vue脚手架（VueCLI）是简化Vue项目的初始化和开发的过程，脚手架可以自动创建项目文件和目录结构，配置构建工具，打包工具，测试工具，使开发者可以专注于业务逻辑的实现，而不需要花费时间和精力在项目的初始化和配置上。

说明：Nodejs是一个让javaScript运行在服务器端的开发平台，属于一种环境（可以类比jdk),这里我们搭建的脚手架需要依赖该环境进行运行（可以类比java需要依赖jdk),所以这里在安装vue脚手架之前要先安装nodejs环境(如果电脑上存在该环境，可以跳过)。

需要打开node.js的官网进行下载 Node.js

点击下载，等待下载完之后，安装属于傻瓜式安装（点下一步即可），只需要安装的时候根据自己的需求进行更改一下安装目录即可（这里需要注意，避免安装在含中文或含有空格的目录下面）。

安装完成之后，在cmd命令行（win+r打开）内进行验证安装是否成功

node-v命令查看安装的nodejs的版本，npm -v查看安装npm的版本（这里nodejs版本内部带有npm，所以npm不需要再进行单独安装）。

补充:npm是随同node.js一起安装的包管理和分发工具，它很方便的让开发人员下载，安装，上传以及管理已经安装的包。

以上完成之后，Nodejs就已经安装成功，但需要进行环境变量的配置（与jdk类似）。

打开安装完成的Nodejs目录，在目录里面新建node_cache和node_global两个文件夹。

以管理员的身份打开cmd命令窗口输入以下命令（这里的路径要填写自己文件所在的路径）

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

右击此电脑选择属性，点击属性选择高级系统设置，在高级系统设置里面选择环境变量。

在系统变量里面新增一个属性，属性值为NODE_HOME,变量值为安装node.js的路径

这里小编nodejs的安装路径为C盘下Program Files文件夹。

配置完之后，找到系统变量里面的path变量点击进去

把 node_cache和node_global两个文件夹的路径放到path里面（这里%NODE_HOME%就是刚刚在新增变量时，变量名）。

以上的最基础的配置已经完成，但为了使用起来更加方便，下载资源的时候更加快，还需要进行一些配置(注意：该命令均要以管理员的身份运行)。

1.全局淘宝镜像的配置

npm config set registry https://registry.npm.taobao.org

检查淘宝镜像是否安装成功

npm config get reggistry

返回 https://registry.npm.taobao.org,证明安装成功。

2.全局安装webpack

npm install webpack -g

检查webpack安装是否成功

webpack -v

出现相应的版本号，证明安装成功

3.安装cnpm(根据自己的需求)

npm install -g cnpm

到这里，关于Node.js的安装与配置就已经结束了。

1.安装vue

npm install vue-cli -g

检查vue是否安装成功

vue -V

这里的V是大写，返回版本号证明安装成功。

2.需要把项目创建到哪个目录下就用cd命令进入到哪个目录下，在该目录下进行vue脚手架的搭建。

vue init webpack exprice

exprice在这里指的是你所搭建项目的名字。

3.利用cd exprice 进入项目，进行一些依赖的安装。

安装项目依赖
npm install

安装路由依赖
cnpm install vue-router@3.5.3 -D

版本号可以根据自己需求进行调整。

4.启动项目

npm run dev

如果这里出现一个访问地址，在谷歌浏览器里面访问出现下面的页面，证明项目创建成功。

关注