文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何启动一个Vue.js项目

2024-04-02 19:55

关注

一. Node.js与Vue

1.1 Node.js

简单来说,Node.js对我们项目来讲相当于一个编译环境,类似于我们java语言编译需要Jvm虚拟机一样。安装Node.js后我们就可以编译Node项目啦。

1.2 Vue.js

简单来说,Vue.js是一个应用框架,它类似于Java中的Spring系列一样,它能给我们提供简洁高效的语法,能够高效率且质量的去协助我们完成一个前端项目;同时因为它是一个轻量级框架,我们可以只需要引入它的一个vue.js就可以去使用它的语法了。

1.3 概述此篇文章内容

此篇文章,博主将带大家在本地跑起来Vue.js项目,同时在服务器能够自己独立部署Vue项目;

二. 本地dev环境运行前端Vue项目

2.1 下载安装Node.js

下载地址 https://nodejs.org/zh-cn/

选择windows版本,建议选择长期支持版按照提示一直点确定即可,node.js安装完成后会自动配置环境变量安装完成后,打开cmd窗口,输入命令: node --version,出现如图所示内容表示安装成功,如图所示:

2.2 安装前端开发工具

前端经常使用的为WebStrom和VsCode,这里以安装WebStrom 做介绍:

1.下载WebStrom: 下载地址 https://www.jetbrains.com/zh-cn/webstorm/download/

2.安装WebStrom,网上有很多教程,具体可百度,不长期使用的话我们可以先免费试用30天

3.导入项目: 点击file -> open -> 选择具体的前端项目,点击ok -> 等待构建索引完成

4.常用命令:

构建项目:


npm install

启动服务


npm run dev

点击提供的url路径,进入浏览器查看服务,如图所示:

 2.3 使用 package.json内的命令启动:

我们可以直接点击绿色箭头启动,如图所示:

图中为Intellij IDEA, WebStrom 使用方式类似;

此外还有其他命令,就不多赘述。同学们需要了解的可自行百度。

三. 服务器环境部署前端Vue项目

3.1 部署Node.js环境

3.2 安装express-generator生成器

输入如下命令安装生成器:


npm install express-generator -g

创建express项目:


express expressDemo (expressDemo替换为自己的项目名)

expressDemo项目目录如下图::

进入项目:


cd expressDemo

若改为了自己的项目名,这里的expressDemo则改为自己的项目名

项目构建:


npm install

打开我们Windows下的开发工具,使用npm build命令,将项目打包,将public下的文件复制到expressDemo中的public目录 内:

输入如下命令,运行expressDemo:


npm start

打开浏览器,输入: http://localhost:3000就可以看到效果了

我们部署的地方如果为服务器,我们要想在自己电脑上看到效果的话,需要注意: 1. localhost替换为服务器ip,3000端口根据实际端口来看; 2. 如果启动成功访问不了,请注意是否防火墙对此端口是否开放之类;

上面是启动vue项目的办法,还有很多办法同学们可以网上寻找答案。一个最简单的办法就是直接将全部代码拷贝上去,执行npm install+npm run dev即可启动成功;非Vue项目,但是是Node.js项目的话,也可以用这种办法哦!

以上就是如何启动一个Vue.js项目的详细内容,更多关于启动Vue.js项目的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯