前端项目启动步骤

已于 2022-08-23 10:32:50 修改
阅读量6.7k 收藏 11
点赞数 7
分类专栏： Vue 文章标签： 前端 javascript vue.js
于 2022-08-01 20:56:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44181196/article/details/126109775
版权

前端项目启动步骤


1、安装node.js，安装完成后，在cmd中执行 node -v，查看是否安装成功
2、切换到项目的根目录
3、在项目的根目录执行：npm install -g cnpm --registry=https://registry.npm.taobao.org，使用淘宝镜像源，下载速度快
4、项目根目录执行cnpm install，下载该项目依赖模块，注意：有时使用 cnpm install会报错，可以使用 npm install命令
5、启动服务：项目根目录执行npm run dev,会自动打开前端首页（注意：后端项目要提前部署好）
6、打包项目：npm run build

轻描丶幸福的旋律
关注
专栏目录
企业级前端项目及启动
haoyu_zhang的博客
08-06 1534
前言 前端模块都采用pcview为后缀，以项目名称为前缀，基于webpack模块化开发方式进行项目构建，下图为前端模块结构: bin文件夹为批处理命令包括依赖安装，打包，发布，开发等功能，详情请看视频教程。 build 文件夹是动态生成的，只有在发布本项目的npm包时才生成，发包时会把build文件夹下的内容发布到npm私服上。 dist 是部署文件夹，此文件夹里边包含nginx服务和最终部署的静态文件。文件夹中static文件夹内容既为打包好的前端web项目，直接考到目标web服务器即可运行
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
m0_61068496的博客
04-21 2654
以我的为例：server# http版本#̲ 继承地址，这里的http_upgrade为上面的proxy_pass# 传递的ip。
本地启动html项目
quanqxj的博客
11-02 3027
安装nodejs sudo git clone https://github.com/nodejs/node.git 安装apache 安装http服务器 sudo npm i -g http-server 运行 http-server
Vue3 搭建前端工程，并使用idea配置项目启动
最新发布
2301_76144723的博客
08-08 1368
Vue3 搭建前端工程，并使用idea配置项目启动
启动前端项目
喵酱
05-31 1423
启动前端项目
Web前后端入门——项目启动
T030606的博客
03-31 2493
通过老师给予的项目源代码，在自己的电脑上运行成功并启动。以下是本人在老师的教导下，在项目启动过程中的一些事件记录。这是一个前后端分开的一个项目，前端利用vue3框架，后端利用Spring Boot 3框架搭配maven工具，同时利用Redis存储临时数据来实现登陆界面实时验证码的效果。
1.启动前端项目（命令行）
热门推荐
m0_59376721的博客
04-11 2万+
1、从github或其他地方获得的前端项目，想要看效果 1.用管理员身份运行命令提示符（windows的控制后台） 2.进入前端项目安装的文件夹（这是我的文件夹） 3.在命令行中输入：npm install 4.在命令行中输入：npm run build 5.在命令行中输入：npm run serve 到这里就成功了，在浏览器中输入地址就可以访问了。 2、如果出现的错误，怎么解决 1.没有安装node.js（直接去百度安装，可以去哔哩哔哩看安装教程）。如何查看是否安装了node，在命令行中输入：n
使用nginx部署前端项目（超详细教程）.pdf
04-29
总之，这篇教程提供了丰富的代码示例和清晰的步骤说明，帮助读者逐步掌握使用Nginx部署前端项目的基本技能。教程不仅限于技术操作，还体现了作者无私分享知识的精神，为学习者提供了一个宝贵的资源。通过实践教程中...
影城项目前端项目服务器
06-30
【影城项目前端项目服务器】是一个专为...以上就是关于“影城项目前端项目服务器”启动和运行的相关知识，涵盖了从环境准备到服务运行、测试和维护的全过程。理解这些要点对于有效地开发和维护这样一个系统至关重要。
前端Vue启动指南1
08-08
通过以上步骤，你应该能够成功启动和运行一个Vue.js项目，理解前端与后端的基本交互，以及如何进行基本的开发工作流程。继续学习Vue的组件化开发、状态管理、路由和其他高级特性，你将能够构建出更复杂的Web应用。
如何运行前端项目
ycfszdaaa的博客
12-06 5479
好了直接上干货。 （是准备记录下来免得我又忘了诶） 安装npm ，command要为install。 借鉴文章：https://www.cnblogs.com/jxcool/p/12514609.html 配置好后，直接点击运行即可。 2.通过终端运行项目 在终端输入 npm run dev，回车即可。 借鉴文章： https://blog.csdn.net/weixin_38441551/article/details/85639658 ...
前端项目运行
辰小白
06-17 1万+
环境：vscode、node.js、cnpm/yarn npm安装起来太慢了、建议使用 cnpm或yarn 1.从码云上下载前台项目，使用vscode打开 2.安装依赖（请提前自行安装 cnmp 或 yarn） 使用命令安装依赖 cnpm install 3.运行项目 使用命令启动 cnpm run dev 第一次运行可能出现抱歉情况，如出现，请安装如下全局依赖 cnpm global add webpack-dev-server cnpm global add w.
前端项目配置启动 node +vue +es6
暴走的皮皮虾博客
04-14 1520
Vue 项目启动 配置
前端启动
qq_41046717的博客
05-24 350
用管理员的方式打开cmd命令，进到该项目 yarn install 再用yarn run serve 命令启动前端项目
IDEA启动VUE前端项目
lkscjwddsg的博客
05-31 2903
很多后端人员，在研发的过程中，也是需要打开前端项目进行查看，如果安装vscode，又影响了电脑性能，强迫症的程序猿肯定接受不了。npm install npm@6 -g（@后跟版本号，若跟的是大版本，则更新到对应大版本最新的小版本）重启IDEA后，执行npm install 需要在前端文件夹里面执行。npm install npm@8.5.5 -g（更新到指定版本）然后执行：npm install express -g。npm install npm -g（更新到最新版本）1、启动配置点击编辑。
Pull下来的前端项目启动流程
lafsca5的博客
03-21 1042
1.下载安装node.js 　官网：https://nodejs.org/en/ 　 2.安装完成后查看是否安装成功 win+r 进入 cmd 输入命令：npm -version 3.配置node.js环境变量 //npm 修改为国内镜像地址 npm config set registry https://registry.npm.taobao.org //配置后可通过下面方式来验证是否成功 npm config get registry //或 npm info express //全局 cnpm 安装
Windows下Nginx配置前端项目启动
07-08
在Windows下配置Nginx来启动前端项目的步骤如下： 1. 首先，确保你已经安装了Nginx并且已经成功启动。你可以在Nginx的官方网站上下载最新版本的Windows安装包，并按照安装向导进行安装。 2. 打开Nginx的安装目录，找到`conf`文件夹。在该文件夹下，你会看到一个名为`nginx.conf`的文件，这是Nginx的主配置文件。 3. 使用文本编辑器（如Notepad++）打开`nginx.conf`文件。在文件中找到`http`块，并在其中添加以下配置： ```nginx server { listen 80; server_name localhost; location / { root C:/path/to/your/frontend/project; index index.html; try_files $uri $uri/ /index.html; } } ``` 在上述配置中，将`C:/path/to/your/frontend/project`替换为你前端项目的实际路径。这里假设你的前端项目的入口文件为`index.html`。 4. 保存并关闭`nginx.conf`文件。 5. 在命令提示符或PowerShell中，切换到Nginx的安装目录，并执行以下命令来测试配置文件是否正确： ``` nginx -t ``` 如果输出显示配置文件语法正确，则可以继续下一步。否则，请检查你的配置文件中是否存在语法错误，并进行修正。 6. 启动Nginx服务器，执行以下命令： ``` nginx ``` 7. 现在，你可以在浏览器中访问`http://localhost`来查看你的前端项目了。 注意：如果你的前端项目使用了其他端口（如3000），你可以在上述配置中的`listen`指令中修改端口号。 希望以上步骤能帮助到你！如果有任何问题，请随时向我提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值