手把手教你脚手架搭建Vue项目

╰+攻爆jí腚メ 2023-02-22 13:48 27阅读 0赞

# 安装Node.js #

![在这里插入图片描述][20200704092542288.png]  
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

简而言之呢，这是我们运行Vue项目必要的运行环境，学习Vue之前需要先进行安装。

安装方式也很简单，前往[官网][Link 1]，选择左边的就行，毕竟是学习嘛，追求稳定性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70]  
安装过程很简单，选择默认的就行，一路next，等待读条完成就行。

打开cmd命令窗口，输入node -v，若出现版本号，则表示安装成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 1]

# 项目创建 #

既然要使用脚手架来创建，那么首先要安装脚手架的包。

**npm install webpack -g**

这个命令是安装打包工具，便于项目管理。

**npm install vue-cli -g**

这个命令就是安装脚手架工具了。

以上两个命令在cmd命令窗口输入即可。

上述两工具安装完成就可以创建项目了。

先创建一个文件夹作为项目的存放目录，在这个文件夹的地址栏输入cmd，直接进入该文件夹路径。

**vue init webpack 项目名**

输入上述命令就可以创建项目啦

安装过程中的选项如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 2]  
创建完的项目如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 3]

# 结语 #

如果说这篇文章有让你学到一定的知识的话，不妨点个赞和关注，让博主能够看到。如果讲解中有什么错误和疏忽，也劳烦在评论中指出或提问，博主会第一时间进行更新和答复，谢谢！

[20200704092542288.png]: https://img-blog.csdnimg.cn/20200704092542288.png
[Link 1]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200704093057830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200704094614790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200704100410110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200704100816358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA==,size_16,color_FFFFFF,t_70