1.启动前端项目（命令行）
发布时间：2024-05-21 13:01
1、从github或其他地方获得的前端项目，想要看效果
1.用管理员身份运行命令提示符（windows的控制后台）
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/6b8e7fd513cb4719ac9e6fe88592af40.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA54K554K55pif6L6w,size_20,color_FFFFFF,t_70,g_se,x_16\")
2.进入前端项目安装的文件夹（这是我的文件夹）
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/969795ac465b4763891e2e39b48a297c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA54K554K55pif6L6w,size_20,color_FFFFFF,t_70,g_se,x_16\")
3.在命令行中输入：npm install
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/fc86ca5e396149eb8c950b60b983254c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA54K554K55pif6L6w,size_20,color_FFFFFF,t_70,g_se,x_16\")
4.在命令行中输入：npm run build
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/5bf44d221a944c98b11193e59e70805d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA54K554K55pif6L6w,size_20,color_FFFFFF,t_70,g_se,x_16\")
5.在命令行中输入：npm run serve
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/c274ca3c5b134768a70cff6f1b0dc638.png\")
到这里就成功了，在浏览器中输入地址就可以访问了。
2、如果出现的错误，怎么解决
1.没有安装node.js（直接去百度安装，可以去哔哩哔哩看安装教程）。如何查看是否安装了node，在命令行中输入：node -v
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/63b9f1eff8d24536adfd9514018c206c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA54K554K55pif6L6w,size_11,color_FFFFFF,t_70,g_se,x_16\")
2.查看npm版本（安装node.js就会安装npm），在命令行中输入：npm -v
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/0aa707c7d5c245d384b2fcccb98b79df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA54K554K55pif6L6w,size_11,color_FFFFFF,t_70,g_se,x_16\")
3. 查看是否安装了vue脚手架（在项目路径下输入指令），查看vue脚手架版本：vue -V，没有就输入指令：npm install -g @vue/cli
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/c41307fc1bf14a0486084373062b03ab.png\")
4.输入npm run serve报错。
我的解决办法：把项目拖入vs code中，看package.json中的配置，我的是vue3，所以是使用npm run serve，如果是vue2，可以试试npm run dev。
![\"请添加图片描述\"](\"https://img-blog.csdnimg.cn/df5d6b75d1dc4dd896cd13536de0adb5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA54K554K55pif6L6w,size_20,color_FFFFFF,t_70,g_se,x_16\")
5.如果上面问题都解决了（将前端项目重新获取一份，之前操作出错的删除，然后对新获取进行操作），再重新输入
npm install
npm run build
npm run serve（npm run dev）