搭建vue脚手架系列一---------环境和工具篇

女爷i 2022-05-26 10:05 132阅读 0赞

第一次写技术博客，希望帮助需要的小伙伴，不喜勿喷。

第一步：首先去安装node.js，从[node.js官网][node.js]下载并安装node，官网为https://nodejs.org/en/download/，我的笔记本是win7-64位的，所以我的选择如下。大家只需要傻瓜式一键安装即可。

![20180429091112782][]

安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

![20180429091409268][]

**这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。**

**2.安装淘宝镜像：**

**打开命令行工具(win+r，然后输入cmd)，输入以下命令：**

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

**安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。**

**![20180429092300871][]**

3.安装webpack，

无论win7还是win10,我在这一步总是出错，所以，还是有一些感悟，大家可以交流哈

npm install webpack -g

npm install webpack --save-dev

按照我上面的两条指令安装，中途会出现安装webpack-cli,点击yes即可，我在这一步死了很久，大家在这一步有问题可以联系我，win10需要在path环境里配置，具体的先不贴出来，有问题的小伙伴可以找我

![20180429121136700][]

4.   安装vue-cli脚手架构建工具

![2018042912191119][]

好了：通过以上4步，基本的环境和工具已经搭建好了。

下一篇，将介绍用vue-cli构建项目

[node.js]: https://link.jianshu.com/?t=https://nodejs.org/en/http://
[20180429091112782]: /images/20220526/caf9a9a379c74ff9b4cdd80ecbef7380.png
[20180429091409268]: /images/20220526/d58d138b39c7448287f1d2fb9c16cba0.png
[20180429092300871]: /images/20220526/8578545eb32e4f9abb1774d6ee65622d.png
[20180429121136700]: /images/20220526/ec6b93af176b4042a91d3efd8e029ab6.png
[2018042912191119]: /images/20220526/9ece9d1eb7584ee59a196b64ba834220.png