本文主要介绍如何启动一个Vue.js项目。对Vue.js感兴趣的同学可以参考一下。
目录
一、Node.js和Vue二。本地开发环境运行前端Vue项目III。服务器环境部署前端Vue项目
一. Node.js与Vue
1.1节点. js
Node.js是基于Chrome V8引擎的JavaScript运行环境。Node.js使用事件驱动的非阻塞I/O模型。
【Node是一个允许JavaScript在服务器端运行的开发平台。它使JavaScript成为与PHP、Python、Perl、Ruby和其他服务器端语言一样的脚本语言。发布于2009年5月,由Ryan Dahl开发,本质上封装了Chrome V8引擎。
Node优化了一些特殊用例,并提供了替代API,使V8在非浏览器环境下运行得更好。V8引擎执行Javascript非常快,性能非常好。Node是一个基于Chrome JavaScript runtime的平台,用于方便地构建响应速度快、易于扩展的网络应用。通过使用节点的事件驱动和非阻塞I/O模型,它是轻量级和高效的,非常适合在分布式设备上运行数据密集型实时应用。
简单来说,Node.js相当于我们项目的一个编译环境,类似于java语言编译需要Jvm虚拟机。安装Node.js后,我们就可以编译节点项目了。
1.2 vue . j
Vue(读音/vju/,类似于view)是一个用于构建用户界面的渐进式JavaScript框架。与其他大型框架不同,Vue设计为自下而上一层一层地应用。Vue的核心库只关注视图层,方便与第三方库或现有项目集成。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合视图组件。
Vue.js本身并不是一个全能的框架3354,它只专注于视图层。因此,学习和集成其他库或现有项目是非常容易的。另一方面,配合相关工具和支持库使用,Vue.js也可以完美驱动复杂的单页面应用。
Vue.js有以下特点:简单易用:在HTML CSS JavaScript的基础上,可以快速上手。灵活:简单紧凑的内核、先进的技术堆栈,足以应对任何规模的应用。高性能:20kb min gzip运行大小,超快的虚拟DOM,最省心的优化。
简单来说,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.导入项目:点击文件-打开-选择具体的前端项目,点击确定-等待索引建立。
4.常见命令:
构建项目:
npm安装
启动服务
npm运行开发
点击提供的url路径,进入浏览器查看服务,如图:
2.3使用package.json中的命令启动:
我们可以直接点击绿色箭头来启动它,如图所示:
图为Intellij IDEA,WebStrom使用方法类似;
除此之外,还有其他命令,这里就不赘述了。学生需要知道的,可以自己找。
三. 服务器环境部署前端Vue项目
3.1部署Node.js环境
参考这个教程,https://blog.csdn.net/qq_37128049/article/details/104431768
只需安装Npm自带的Node即可。
本教程中配置的节点环境变量是一个临时环境变量,在项目重新启动时需要重写。需要永久环境变量的同学可以参考在线教程。
3.2安装快速发电机
输入以下命令安装生成器:
npm安装快速发电机g
创建快速项目:
ExpressDemo (ExpressDemo被替换为其自己的项目名称)
expressDemo项目目录如下:
输入项目:
cd快速演示
如果改成自己的项目名,这里的expressDemo就改成自己的项目名。
项目建设:
npm安装
在Windows下打开我们的开发工具,使用npm build命令,打包项目,并将public下的文件复制到expressDemo中的public目录:
输入以下命令运行expressDemo:
npm开始
打开浏览器输入:http://localhost:3000看效果。
如果我们的部署地点是服务器,想要在自己的电脑上看到效果,需要注意:1。本地主机替换为服务器ip,3000端口以实际端口为准;2.如果启动成功,请注意防火墙是否对该端口开放;
以上是vue项目的启动方式,同学们也有很多方法可以在网上找到答案。一个最简单的方法就是直接复制所有代码,执行npm install npm run dev成功启动;如果不是Vue项目,而是Node.js项目,也可以用这个方法!
这就是如何开始一个Vue.js项目的细节。更多关于启动一个Vue.js项目的信息,请关注我们的其他相关文章!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。