Web 前端之 Vue 脚手架环境的安装搭建/并创建Vue脚手架工程简单整理（内含:国内环境安装搭建下载速度慢的简单解决办法）

拼搏现实的明天。 2022-09-16 06:06 9阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16][]

#  Web 前端 之 Vue 脚手架环境的安装搭建/并创建Vue脚手架工程简单整理（内含:国内环境安装搭建 下载速度慢 的简单解决办法） #

**目录**

Web 前端 之 Vue 脚手架环境的安装搭建/并创建Vue脚手架工程简单整理（内含:国内环境安装搭建 下载速度慢 的简单解决办法）

一、简单介绍

二、实现原理

三、注意事项

四、安装脚手架环境具体步骤

五、创建 Vue 脚手架工程

附加：

一、如果npm在国内的网络环境下可能会比较慢，解决方案

--------------------

## 一、简单介绍 ##

Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，Web 前端开发中使用 Vue 脚手架时，环境的安装搭建，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

##          二、实现原理 ##

安装

1、使用 node 的相关命令进行操作者（如果没有安装 node ，需要先安装）

2、npm install -g @vue/cli         安装 （注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上）

3、npm install -g @vue/cli-init      安装初始化的一些东西

创建

1、npm init    初始化

2、vue init webpack test\_demo创建 test\_demo使用

3、cd test\_demo / npm run dev 运行，开启网页浏览

## 三、注意事项 ##

1、安装 vue-cli 脚手架目前需要node版本为 v4.0 以上

2、npm install -g @vue/cli  加-g是安装到全局

## 四、安装脚手架环境具体步骤 ##

1、如果没有安装 node，可以在百度搜索 node.js，点击进入官网

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

2、根据需要选择安装版本即可

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

3、双击下载的安装包进行安装

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

4、根据需要选择安装路径，然后下一步

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

5、根据需要设置，或者一路 Next ，然后点击 install 安装

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_18_color_FFFFFF_t_70_g_se_x_16][]

6、安装 node 完成后，选择一个文件夹作为环境安装目录，cmd 打开任务窗口，并切换到该目录文件夹

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

7、使用命令npm install -g @vue/cli  进行安装，一段时间后，安装OK即可

命令：npm install -g @vue/cli

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

8、使用命令npm install -g @vue/cli-init  进行安装，一段时间后，安装OK即可

命令：npm install -g @vue/cli-init

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

## 五、创建 Vue 脚手架工程 ##

1、使用 npm init 初始化下环境，文件夹中生成一个 文件

命令：npm init

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

2、使用 vue init webpack test\_demo 创建工程 test\_demo，然后多个 test\_demo 工程目录

命令：vue init webpack test\_demo

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

3、test\_demo 工程目录如下，其中 src 目录如下

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

4、执行 最后提示的两个命令

然后，可以在网页输入 [http://localhost:8080][http_localhost_8080] 得到如下网页

如果网页无法正常显示，查看 8080 端口是不是被其他应用占用

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 17][]

5、这里 test\_demo 其实就可以作为一个模板工程使用了

# 附加： #

## 一、如果npm在国内的网络环境下可能会比较慢，解决方案 ##

参考博文：[vue-cli 脚手架 安装 - 雅昕 - 博客园][vue-cli _ _ - _ -]

使用淘宝镜像:

1、官方网址：[淘宝 NPM 镜像][NPM]；

2、安装：npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

3、注意，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

4、如何更新npm的方法：  可以使用 npm install -g npm 来更新版本

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 18][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/810cd2c095044336b9b686fc7537e98d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/d3f297b8843f4cfb858bf675e60c225f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/30c3827e04d642e997a3731a12dd52a2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/26e9c6f556944cf495ccce102ed24cb1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/a71fdad936f744de84fae2cd17eae5fa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/31d180bb800b42b18a259ba11b0b07f3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/b5d3e9427f6b4c1cbd9c27ad64640cdd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/5703a0a352c34076849fd5686cb9ca65.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/d493bae61a5843e1b13098793df2600c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/2e72059892ad435daa6a346262f6aa3d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/62901882cc854b0bafc0fc6ea2a17aba.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/40c2c902a90b4cb1a30be8546a6456ae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/d580ff16a1f64d7789f44bbc40b1c2fd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220828/9f9e5409d206438a8152ea34d07d83df.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220828/4d8893c4400b4688b48817e851bac3c5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220828/db5476520e8d4d65b0cb5a3bc8a903d7.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220828/9403ee8f052d4825bd3610deb20a2f3e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 16]: /images/20220828/07e37f19dd0840bcbca48f8ea401b5b2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 17]: /images/20220828/958907b73f9344ebacdfc31b5d4cf9b9.png
[vue-cli _ _ - _ -]: https://www.cnblogs.com/loveyaxin/p/7094089.html
[NPM]: http://npm.taobao.org
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ6a2BWEFO_size_20_color_FFFFFF_t_70_g_se_x_16 18]: /images/20220828/e465ad4e291945099e6969a1accc844e.png