搜索

安装node.js、npm、webpack、vue-cli(vue脚手架)步骤分享

喃叽 喃叽

安装的工具:
------

1. 【node.js】
2. 【npm】
3. 【webpack】
4. 【vue-cli(vue脚手架)】


----------



1️⃣安装Node.js

Node.js安装包及源码下载地址为:https://nodejs.org/en/download/  选择Windows Installer点击下载

步骤 1 : 双击下载后的安装包 v0.10.26,如下所示:/usr/uploads/2020/11/904376572.png步骤 2 : 点击以上的Run(运行),将出现如下界面:/usr/uploads/2020/11/254770167.png步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :/usr/uploads/2020/11/1064620021.png步骤 4 : Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录,并点击 next(下一步):/usr/uploads/2020/11/277196325.png步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步):/usr/uploads/2020/11/1230366145.png步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):/usr/uploads/2020/11/3934645279.png安装过程:/usr/uploads/2020/11/3008177346.png点击 Finish(完成)按钮退出安装向导。/usr/uploads/2020/11/3778626474.png**检测PATH环境变量是否配置了Node.js**

点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果:

   TH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
   C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
   c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
   C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
   C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

**检查Node.js版本**

点击开始=》运行=》输入"cmd" => 输入命令"node -v"/usr/uploads/2020/11/1540604220.png2️⃣安装cnpm

由于npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm

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

3️⃣安装webpack

   $ npm install webpack -g

创建webpack项目

   $ vue init webpack my-vue //(项目文件夹名)/usr/uploads/2020/11/1072057915.png4️⃣安装vue-cli

   $ cnpm install vue-cli -g

这个过程会耗时十几秒,等走完就好

好了,到此整个环境就搭建好了

下面就是运行项目了

   $ cd desktop  //项目名称/usr/uploads/2020/11/3312129120.png进入项目之后安装依赖

   $ npm install

安装成功后你会发现项目里多了个/usr/uploads/2020/11/2339347487.png然后

   $ npm run dev/usr/uploads/2020/11/1206731848.png/usr/uploads/2020/11/2368583962.png自动启动浏览器就会打开项目了

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。

查看目录

目录

来自 《安装node.js、npm、webpack、vue-cli(vue脚手架)步骤分享》

评论区



最新文章