本文主要介绍如何启动一个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项目的信息，请关注我们的其他相关文章！