Vue项目启动,vue工程启动

  Vue项目启动,vue工程启动

  本文主要介绍如何启动一个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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: