win10安装vue

拼搏现实的明天。 2021-09-29 05:28 383阅读 0赞

转自：[https://www.cnblogs.com/zhaomeizi/p/8483597.html][https_www.cnblogs.com_zhaomeizi_p_8483597.html]

一、安装node.js（[https://nodejs.org/en/）][https_nodejs.org_en]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 1]  
二、设置nodejs prefix（全局）和cache（缓存）路径

1、在nodejs安装路径下，新建node\_global和node\_cache两个文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 2]  
2、设置缓存文件夹

npm config set cache “D:\\vueProject\\nodejs\\node\_cache”  
　设置全局模块存放路径

npm config set prefix “D:\\vueProject\\nodejs\\node\_global”  
设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\\vueProject\\nodejs\\node\_global里

四、设置环境变量（非常重要）

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径  
1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。  
2、修改系统变量PATH  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 3]  
3、新增系统变量NODE\_PATH  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 4]  
五、安装Vue

cnpm install vue -g

![在这里插入图片描述][20190704103658805.png]  
六、安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 5]  
七、新项目的创建

1.打开存放新建项目的文件夹

打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录

![在这里插入图片描述][20190704103740810.png]  
2.根据模版创建新项目

在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。

vue init webpack-simple mytest  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 6]  
初始化完成后的项目目录结构如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 8]  
3、安装工程依赖模块

定位到mytest的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\\node\_module目录下，node\_module文件夹会被新建，而且根据package.json的配置下载该项目的modules

cd mytest  
cnpm install  
4、运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。

cnpm run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 9]

[https_www.cnblogs.com_zhaomeizi_p_8483597.html]: https://www.cnblogs.com/zhaomeizi/p/8483597.html
[https_nodejs.org_en]: https://nodejs.org/en/%EF%BC%89
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70]: /images/20210901/98bfb4ca702d4aaf8f39e17b7ca3dd2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 1]: /images/20210901/3ed7552b0577463fa1dd346b4f0483e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 2]: /images/20210901/782f0fdc612a405fa7c07e34905c10c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 3]: /images/20210901/9e5cea899057427eb938ecdd773440f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 4]: /images/20210901/f950b1204dc948709ac11f1630c852bb.png
[20190704103658805.png]: /images/20210901/3bed9b0f161b449d8dd3d7a4a246cabc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 5]: /images/20210901/a79c67b96f214fd9a6c8bce272b97289.png
[20190704103740810.png]: /images/20210901/91ec17b5ec8b416dbecfdf237e1979b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 6]: /images/20210901/6718ab9b0fa64b25be91316d5cf1b227.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 7]: /images/20210901/a88de655ffc54f0eaf1a33a1ce6cd96a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 8]: /images/20210901/af6e511d446c46749e9812e986583f9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzM3OTI3_size_16_color_FFFFFF_t_70 9]: /images/20210901/6086a059602b4a5ab9d4363e41c25ff0.png