开发vue需要安装的开发工具和环境的配置记录

曾经终败给现在 2022-04-11 02:24 268阅读 0赞

> **前端开发vue需要一个好用的代码编辑器，首选肯定是vsCode（全称Visual Studio Code）；想要运行前端代码并在浏览器中访问，就得安装nodeJS。本篇博客就是介绍如何安装和配置vsCode和nodeJS。**

### 下载 ###

**vsCode官网下载地址**

链接：[https://code.visualstudio.com/Download][https_code.visualstudio.com_Download]

**nodeJS官网下载地址**

链接：[http://nodejs.cn/download/][http_nodejs.cn_download]

## ##

### 安装 ###

**vsCode就是简单的下一步下一步即可**

**nodeJS安装**

1.   先通过上面的官网链接下载你所需要的版本（这里演示的版本是：node-v8.9.1-x64.msi）

2.   可以先通过 cmd ，输入 'node -v' 以及 'npm -v' 指令查看 nodeJS 版本（如果是第一次安装肯定会显示 ''node' 不是内部或外部命令，也不是可运行的程序或批处理文件。'"）

3.   双击从官网下载下来的安装包，进行安装（也是下一步下一步即可）。下面是安装成功后的界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70][]

> **注：安装成功后，nodeJS 的环境变量会被自动添加到 Path 的最后面。这时重新打开一个 cmd 窗口，输入 'node -v' 以及 输入 'npm -v' 就可以分别查看到安装的版本号了；并且在 vsCode 中可以直接使用 npm 指令启用项目了。下面的步骤是用来安装 cnpm 的，npm 的镜像是国外的，cnpm 的镜像是国内的。**

4.   在你选择的安装目录下就会出现一个名为 nodejs 的文件夹，双击打开，目录结构我这里是这样的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70 1][]

5.   在此文件夹下面创建两个新的文件夹 'node\_global' 以及 'node\_cache'，目录结构就成这样子了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70 2][]

6.   接着在 cmd 中设置全局路径，粘贴如下两条命令（根据你新建的文件夹路径来写，这里是我自己电脑上创建的路径）

npm config set prefix "D:\Program Files (x86)\nodejs\node_global"
    
    npm config set cache "D:\Program Files (x86)\nodejs\node_cache"

> **注：如果提示 node' 不是内部或外部命令，也不是可运行的程序或批处理文件。'**
> 
> **解决方案：**
> 
> **   ① 到环境变量中查看，Path 最后面是否有自动配置好的 nodejs 环境变量；如果没有，那么就手动把 nodejs 文件夹路            径配置到 Path 中**
> 
> **   ② 重开一个 cmd 窗口**

7.   安装 cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org（使用的淘宝镜像）

> 注：在第七步操作前，我们新建的 node\_global 文件夹下面是空的，当第七步执行结束后，node\_global 文件夹下就会变成如下图这样子，会发现有了 cnpm 指令。但是这时在 cmd 中输入 'cnpm -v' 还是无效指令。

![20181216170157287.png][]

8.   环境变量中配置 cnpm：把 node\_global 文件夹配置在环境变量中，也就是在上面自动添加的 nodejs 环境变量后加一个 ';' 隔开，把 node\_global 文件夹的位置配置进去

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70 3][]

> **注：这时重开 cmd 窗口，输入 'cnpm -v' 就可以查看到版本号相关的信息了。**

到此相关的安装和配置已经结束了

> **欢迎来访[我的vue专栏总篇][vue]博客**

希望能够帮助到你

over

[https_code.visualstudio.com_Download]: https://code.visualstudio.com/Download
[http_nodejs.cn_download]: http://nodejs.cn/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70]: /images/20220411/44b86f33da904c1e92f92e0dd77ebd29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70 1]: /images/20220411/06057bad609b49e88f4b9ca976b94d0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70 2]: /images/20220411/6cccb9ddf1b545c386f2b43db3af9fd8.png
[20181216170157287.png]: /images/20220411/26dd7946a03e46049d05e23b11a37918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70 3]: /images/20220411/a892e0b3738643fabf9abf3c94ebfcea.png
[vue]: https://blog.csdn.net/qq_41402200/article/details/84390947