创建Vue项目工程

柔情只为你懂 2024-03-26 10:46 85阅读 0赞

## 前期准备 ##

查看是否安装Node.js;npm命令是否可用;vue脚手架是否安装成功。  
`node -v`  
`npm -v`  
`vue -V`  
![在这里插入图片描述][42a1816cfe8647b7a18f944f4cb5345b.png]  
都安装好之后可以进行创建。

## 步骤 ##

win+r—>cmd—>vue ui  
![在这里插入图片描述][3ed6866431c04338bbe91df9cd70a554.png]  
![在这里插入图片描述][112b8d012c1b4583bb050234924a5c95.png]  
![在这里插入图片描述][769eeeb679454f3f83cfc3871560e076.png]  
![在这里插入图片描述][8311d6d49cb842e082ebdcc3dfe54374.png]  
![在这里插入图片描述][16bfa2cb09e84b25a47bb99cdda64eba.png]  
![在这里插入图片描述][3c5a94cb9d404eed9e9032c05e1dbd52.png]  
![在这里插入图片描述][43e5eadd0c8d4313a23789a74bcbe861.png]  
![在这里插入图片描述][0316d030066448aaa5743ef37a037c98.png]

## 启动 ##

创建好之后，此处可以启动。  
![在这里插入图片描述][1fd2e12227e94837bc872b9b304879d9.png]  
点击此处可进入页面。  
![在这里插入图片描述][7a4017eb541f408f86a2f08b16ecc150.png]  
![在这里插入图片描述][6a1d6c2ebf0f4fc48477a143efe89f0d.png]  
成功创建。  
使用命令一样可以启动。  
默认命令：  
安装依赖命令`npm install`  
启动命令`npm run serve`  
打包命令`npm run build`

[42a1816cfe8647b7a18f944f4cb5345b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c33f49b09b034175b19ba243a64db7e7.png
[3ed6866431c04338bbe91df9cd70a554.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/99fda81aaac645898fd561b8108f807d.png
[112b8d012c1b4583bb050234924a5c95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7baea8d0270d46bd80db0e2d1562a8ea.png
[769eeeb679454f3f83cfc3871560e076.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ffe736e084ac45e78bd780c6d11020a2.png
[8311d6d49cb842e082ebdcc3dfe54374.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/32f310739c9041f6bbe52cdf7b8b9aa7.png
[16bfa2cb09e84b25a47bb99cdda64eba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8b202b4b3ad747da940e2a102835f592.png
[3c5a94cb9d404eed9e9032c05e1dbd52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/28ef8565c8c2468e9749595b00f1de48.png
[43e5eadd0c8d4313a23789a74bcbe861.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5d74eb66b16a443f8058fb418ff57098.png
[0316d030066448aaa5743ef37a037c98.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ab9caf471d9e4281851316994e060720.png
[1fd2e12227e94837bc872b9b304879d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c4c3d5f97a684804b16a9c9cd277479c.png
[7a4017eb541f408f86a2f08b16ecc150.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0bc01e6405a245caa8dc3dd0cb0269f9.png
[6a1d6c2ebf0f4fc48477a143efe89f0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aaff5794f6e94be5a599c0dedb423521.png