vue环境搭建（新手，手把手教程）包教包会

喜欢ヅ旅行 2024-04-17 05:27 68阅读 0赞

# **1.安装node.js** #

## **1.1安装包下载** ##

安装包已经在百度云中了==》node-v12.9.0-x64.msi

链接：https://pan.baidu.com/s/1Ja0FgAnjhYrvpzxMZxRTAA   
提取码：6gbd

也可以去官网下载[https://nodejs.org/en/][https_nodejs.org_en]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70][]

## **1.2运行msi文件** ##

**我存在E盘下nodejs文件夹下**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 1][]

## **1.3设置nodejs prefix（全局）和cache（缓存）路径** ##

①在nodejs安装路径下，新建node\_global和node\_cache两个文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 2][]

②设置缓存文件夹

进入到Windows dos界面，进入nodejs文件夹目录下。执行下方命令

npm config set cache "E:\\nodejs\\node\_cache"

npm config set prefix "E:\\nodejs\\node\_global"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 3][]

## **1.4 基于 Node.js 安装cnpm（淘宝镜像）** ##

说明：**由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue。****淘宝的cnpm命令管理工具可以代替默认的npm管理工具。**

进入到Windows dos界面，进入nodejs文件夹目录下。执行下方命令

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 4][]

## **1.5 设置环境变量（非常重要，方便以后使用）** ##

说明：**设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径**

①鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

②修改系统变量PATH

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 5][]

③新增系统变量NODE\_PATH

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 6][]

**温馨提示：**

**记得点击保存，否则环境变量无法生效。**

**另外dos界面需要关闭重新开启，全局变量方可生效！**

# **2.安装VUE** #

## **2.1 安装vue框架** ##

进入到Windows dos界面，执行下方命令

cnpm install vue -g

![20190822110545685.png][]

## **2.2 安装vue命令行工具，即vue-cli 脚手架** ##

进入到Windows dos界面，执行下方命令

cnpm install vue-cli -g

![20190822110601681.png][]

# **3.新项目的创建** #

## **3.1 新建文件夹** ##

在E盘新建一个文件夹名为vueProject

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 7][]

## **3.2 新建命令** ##

进入到Windows dos界面，进入到vueProject文件夹目录下，执行下方命令

vue init webpack mytest

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 8][]

新建项目后效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 9][]

**其中文件夹功能说明**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 10][]

## **3.3 安装工程依赖模块** ##

进入到Windows dos界面，进入到vueProject/mytest文件夹目录下，执行下方命令

cnpm install

![20190822110738383.png][]

# **4.运行项目、测试** #

说明：运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。

## **4.1启动项目** ##

进入到Windows dos界面，进入到vueProject/mytest文件夹目录下，执行下方命令

cnpm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 11][]

## **4.2 启动成功** ##

表示服务器等待连接

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 12][]

## **4.3 测试连接** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 13][]

**觉得本文章对您有帮助，那么可以选择打赏。  
打赏多少，您高兴就行，谢谢您对我的支持！ ~(@^\_^@)~**

**             微信扫一扫**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 14][]

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/6e345e84741d454a9c9670de509d687d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/34b592eee59440e5a7d4e03e71a60f18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/c8c27ae7a3584d0d84f67efc5979a7d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/6cace81a2cd0412093cfed1204e559d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/20d15271d0b94588b56cd7a9dee9a01b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/68d04432d843423ebddfcd871d86eb75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/1ad79b97448c4eb4bb26cfbd5b647ee4.png
[20190822110545685.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/0918574d31d2415b86b00b130a8404fe.png
[20190822110601681.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/5d23aa1e3017415ebb19aad8df96bfd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/78107570520149338e12b51748280ccc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/accefe0d4025489b8349a8aa68069a20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/545da4410b1148639f81a896e83b53f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/a8d34f6dae7340cbb37c11861943d925.png
[20190822110738383.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/4088ecdeaf3f41f58de24ba9bc95352e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/deb5c025093a4b5eafbfa91d9f428175.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/97daf8431dbe490b912da2e583beeaf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/b1b95266cd72487ea1e4a928eaab43a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/0cb2846548704a788611aebb4700e4dc.png