创建vue 脚手架

小灰灰 2022-09-10 14:24 246阅读 0赞

1.下载node.js  
外网环境会比较卡，可在node.js中文网下载  
http://nodejs.cn/download/current/  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_20_color_FFFFFF_t_70_g_se_x_16]

2.安装 node.js  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/41a2e2f2cd72455f8dd541d42b016292.png?x-oss-process=image/watermark,type\_ZHJvaWRzYW5zZmFsbGJhY2s,shadow\_50,text\_Q1NETiBATXVfTXXmmK\_kuIDlj6rlsI\_nmb0=,size\_14,color\_FFFFFF,t\_70,g\_se,x\_16][https_img-blog.csdnimg.cn_41a2e2f2cd72455f8dd541d42b016292.png_x-oss-process_image_watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_14_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_15_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_14_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_15_color_FFFFFF_t_70_g_se_x_16 1]

然后一路点下一步完成即可。

2.验证node.js是否下载成功

1）node -v 查看 node 版本

2）npm -v 查看 npm 版本  
![!\[][3c55076a4c714b84b02afc1cc35ba015.png]  
在这里插入图片描述\](https://img-blog.csdnimg.cn/1dad602a788c4d6db1d39d4c324555fa.png)

3.创建存放对应下载依赖和缓存依赖的文件夹

【node\_global】及【node\_cache】  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_20_color_FFFFFF_t_70_g_se_x_16 1]

4.配置npm 的全局路径 和缓存路径

npm config set prefix "D:\nodejs\node_global"
    npm config set cache "D:\nodejs\node_cache"

5.安装淘宝镜像。cmd命令输入命令:

npm config set registry " https://registry.npm.taobao.org "

6.安装 vue/cli

npm install @vue/cli -g

出现这个就是下载完成  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_15_color_FFFFFF_t_70_g_se_x_16 2]  
运行 vue create vue\_test 提示  
‘vue’ 不是内部或外部命令，也不是可运行的程序  
或批处理文件。因为没有配置环境变量

这是因为我们在执行指令时，它会默认在node安装根目录下查找指令文件，在这里就是vue.cmd,然后还会在node安装根目录下的node\_modules下查找依赖包文件夹，在这里就是@vue文件夹，因为我们修改了全局包的存放路径，所以自然找不到了，所以我们需要把我们指定的全局包存放路径添加到系统环境变量，这样就可以找到了

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

7…配置环境变量

配置一个名为 NODE\_PATH 的环境变量值为  
D:\\nodejs\\node\_global\\node\_modules  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
在path 下新建 **D:\\nodejs\\node\_global**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_20_color_FFFFFF_t_70_g_se_x_16 3]

然后运行就可以完成成了  
![在这里插入图片描述][367a5a4ee5fb4065bca686c67f2fc6a8.png]  
![在这里插入图片描述][0ed870a9bcbc41d49795bd4698aa6d56.png]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ab240d53558c4bcd880842130d7ba442.png
[https_img-blog.csdnimg.cn_41a2e2f2cd72455f8dd541d42b016292.png_x-oss-process_image_watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/6e091ad96e17409ea6872c79536a6050.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/13fd3999a67d4d7fac85855588423b3e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3ffcb9f86ce2445998756a636c89889f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_15_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/46359aae06d644b0b9b4c9be107a49dc.png
[3c55076a4c714b84b02afc1cc35ba015.png]: https://img-blog.csdnimg.cn/3c55076a4c714b84b02afc1cc35ba015.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/9a8c9a66c5da4b34804ecae8817a89c6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_15_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/99fe8b29186a465aa1e8b721424b7d24.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d4f071a832be4ac7b79c29632cdb0857.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/a8cda588fc4d429db4d6f75923caab09.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/b78944ab8b3a4f42a10a6632a11213f0.png
[367a5a4ee5fb4065bca686c67f2fc6a8.png]: /images/20220829/ea20ac49c553436aa8816c31982ab4e9.png
[0ed870a9bcbc41d49795bd4698aa6d56.png]: /images/20220829/8829536c3a184d149b8d100f243db0b8.png