vue项目初始化和部署

目录

1. 技术简介... 2

2. 安装Node.js. 3

3. 全局安装Vue CLI (脚手架工具) 5

4. 创建一个新的Vue项目... 6

5. 在阿里云虚拟机安装和配置Nginx. 9

6. 将Vue项目打包部署到Nginx下... 14

7. 访问部署的项目... 14

1. 技术简介

Vue.js(通常简称为Vue)是一个用于构建用户界面的现代JavaScript框架。它是由尤雨溪(Evan You)在2014年创建的,并于同年首次发布。Vue被设计为易于学习、灵活且高效,使开发者可以快速构建交互性强、响应式的单页面应用(SPA)以及动态Web界面。

主要特点:

  1. 响应式数据绑定:Vue使用了响应式的数据绑定机制,当数据发生变化时,相关的视图会自动更新,使得开发者不需要手动操作DOM
  2. 组件化开发:Vue采用了组件化的开发方式,将应用拆分为多个组件,每个组件都有自己的状态和视图,可以重用和组合,使得应用的开发和维护更加简单和高效。
  3. 虚拟DOM:Vue通过虚拟DOM机制,将对DOM的操作转化为对虚拟DOM的操作,然后将虚拟DOM与真实DOM进行比对,最终只更新发生变化的部分,从而提高性能。
  4. 简洁优雅:Vue的API设计简洁明了,学习曲线较为平缓,易于上手。同时,Vue也提供了丰富的功能和扩展性,满足了各种规模的项目需求。
  5. 社区支持:Vue拥有一个庞大而活跃的社区,提供了大量的插件、工具和解决方案,帮助开发者解决各种问题,并不断推动Vue生态系统的发展。

应用场景:

Vue适用于构建各种类型的Web应用,包括单页面应用(SPA)、多页面应用(MPA)、移动应用、桌面应用等。它广泛应用于各行各业的项目中,包括企业级应用、个人项目、开源项目等。

Node.js:

Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它可以用于构建高性能的网络应用程序,特别是服务器端应用程序。Node.js使用事件驱动、非阻塞I/O模型,使得它非常适合构建实时应用程序、API和服务端渲染的网页。

在Node.js中,你可以使用JavaScript语言编写服务器端的代码,处理HTTP请求、数据库操作、文件操作等。Node.js提供了丰富的模块和库,使得开发者可以轻松构建各种类型的后端应用。

Vue.js与Node.js之间的关系:

  1. 前后端分离开发: 在现代Web开发中,通常采用前后端分离的架构。Vue.js用于构建前端用户界面,而Node.js用于构建后端服务器和API。Vue.js发送HTTP请求到Node.js后端,后端处理请求并返回数据,前端再将数据渲染到页面上。
  2. 全栈开发: 有些开发者同时具备前端和后端开发的能力,他们可以在同一个项目中使用Vue.js和Node.js。例如,使用Vue.js构建前端界面,同时使用Node.js构建后端服务和API,这样可以更好地协同开发和部署。
  3. 构建SSR(服务器端渲染)应用: Vue.js和Node.js也可以一起用于构建服务器端渲染(SSR)的应用。Node.js作为后端服务器,用于渲染Vue组件并返回已渲染的HTML页面给客户端,这种方式可以提高应用的首屏加载速度和SEO优化。

阿里云虚拟机(ECS):

阿里云虚拟机,也称为Elastic Compute Service(ECS),是阿里云提供的一种弹性计算服务,它可以让你在云端轻松创建和管理虚拟机实例,以运行各种类型的应用程序。

主要特点:

  1. 弹性和可扩展性:你可以根据实际需求随时增加或减少虚拟机实例的数量,以应对流量的变化和应用的需求。
  2. 灵活的配置选项:阿里云虚拟机提供了各种不同类型和规格的实例供选择,以满足不同应用场景的需求。你可以选择CPU、内存、存储等配置来配置虚拟机实例。
  3. 安全可靠:阿里云虚拟机提供了安全加固、网络隔离、数据加密等安全功能,保障你的应用数据的安全和隐私。
  4. 弹性网络:你可以灵活配置网络规则、访问控制和安全组等网络设置,以确保你的虚拟机实例能够安全、高效地与其他资源通信。
  5. 全球部署:阿里云虚拟机支持全球范围内的多个地域和可用区,你可以根据用户分布和应用需求选择合适的地域来部署虚拟机实例,提供更快的访问速度和更稳定的服务。

Nginx

Nginx是一个高性能的开源HTTP和反向代理服务器,也是一个通用的TCP/UDP代理服务器。它被设计用来处理高并发的网络流量,并提供了许多高级功能和配置选项,使其成为构建可靠、安全和高效的Web服务的理想选择。

主要特点:

  1. 高性能:Nginx采用了事件驱动、异步非阻塞的架构,能够高效处理大量并发请求,适用于高负载的Web服务场景。
  2. 反向代理:Nginx可以作为反向代理服务器,接收客户端的请求并转发到后端的应用服务器,提供负载均衡、缓存、SSL终端等功能,从而提高网站的性能和可靠性。
  3. 静态文件服务:Nginx可以直接提供静态文件的服务,无需转发请求到应用服务器,加快了静态资源的访问速度。
  4. 高度可定制性:Nginx提供了丰富的配置选项和模块化的架构,使得用户可以根据自己的需求灵活定制和扩展服务器功能。
  5. 负载均衡:Nginx支持基于轮询、IP哈希、最少连接等算法的负载均衡,可以将请求分发到多个后端服务器上,提高系统的稳定性和可用性。
  6. 动态模块加载:Nginx支持动态模块加载,用户可以根据需要动态加载或卸载模块,而无需重新编译和部署Nginx服务器。
  7. 高级的安全功能:Nginx提供了许多安全功能,如访问控制、防盗链、DDoS防护等,可以保护Web服务器免受各种网络攻击。

2. 安装Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用于构建服务器端应用程序。

步骤:

  1. 访问Node.js官网: 打开浏览器并访问Node.js官网。

  1. 下载安装程序: 根据你的操作系统选择适用的安装程序。一般情况下,Node.js提供了适用于Windows、macOS和Linux的安装程序。选择与你操作系统相匹配的版本,并点击下载。

在这里我根据自己电脑的情况选择在winodws下的64位安装包

这里的下载过程一般会比较慢,需要耐心等待,也可以选择通过其他方式下载vue.js的安装包,但需要注意其安全性。

  1. 运行安装程序: 下载完成后,运行安装程序。在Windows上,你将看到一个安装向导;在macOS上,你将看到一个.pkg文件;在Linux上,你可能需要使用包管理器(如apt或yum)进行安装。

  1. 按照提示安装: 安装过程中,你可能需要接受许可协议、选择安装路径等。根据向导的提示逐步完成安装过程。
  2. 验证安装: 安装完成后,打开命令行终端(Windows用户可以使用PowerShell或命令提示符),输入以下命令来验证Node.js和npm(Node.js包管理器)是否成功安装:

node -v npm -v

如果成功安装,将会显示Node.js和npm的版本号。

3. 全局安装Vue CLI (脚手架工具)

Vue CLI是Vue.js的官方脚手架工具,用于快速搭建Vue.js项目。

步骤:

  1. 打开命令行/终端: 打开命令行终端。

  1. 执行全局安装命令: 在命令行中输入以下命令,以全局安装Vue CLI:

npm install -g @vue/cli

这会将Vue CLI安装到全局环境中,使其可以在任何目录下使用。

  1. 等待安装完成: 安装过程可能需要一些时间,取决于你的网络连接速度和计算机性能。

当出现added等等消息的时候就是已经安装好了

  1. 验证安装: 安装完成后,你可以输入以下命令来验证Vue CLI是否成功安装:

vue --version

如果成功安装,将会显示Vue CLI的版本号。

4. 创建一个新的Vue项目

使用Vue CLI可以快速创建一个新的Vue.js项目。

步骤:

  1. 执行创建命令: 在命令行中执行以下命令来创建新的Vue项目:

vue create my-vue-app

其中,my-vue-app是你想要创建的项目名称,你可以根据实际情况修改。

  1. 选择配置选项: 执行命令后,Vue CLI会提示你选择一些配置选项。你可以使用上下箭头键来浏览选项,并使用回车键来选择。通常,你可以选择默认配置,但也可以手动选择特性和插件。

这个警告是因为你正在使用的Node.js版本中的"punycode"模块已经被弃用了。你可以选择使用一个"用户地"的替代方案来替代它。不过,这个警告不会影响你创建Vue应用程序。

至于npm registry连接速度较慢的提示,这是因为你当前连接的npm registry可能速度较慢。提示建议你切换到一个更快的镜像站点来加快安装速度。通常情况下,使用提供了更快速度的镜像站点是一个好主意。

如果你愿意切换到更快的npm registry镜像,你可以按照提示输入"Y",然后按下回车。这样npm将使用提供更快速度的镜像站点来安装依赖。如果你不想切换,可以输入"N",然后按下回车。

所以,你可以根据你的偏好选择"Y"或者"N"来继续。

在这里,Vue CLI 提供了几个预设选项供你选择,以便快速设置你的 Vue 项目。以下是每个选项的简要说明:

  1. Default ([Vue 3] babel, eslint):
    • 这是默认的预设选项,使用 Vue 3 版本。它包含了 Babel 和 ESLint 插件,用于将 Vue 代码编译成向后兼容的 JavaScript 代码,并进行代码风格检查。
  2. Default ([Vue 2] babel, eslint):
    • 同样是默认的预设选项,但使用的是 Vue 2 版本。它也包含了 Babel 和 ESLint 插件,用于编译和检查 Vue 2 代码。
  3. Default (Vue 3) Manually select features:
    • 与第一个选项类似,但提供了手动选择功能的选项。这使你可以在下一步中手动选择你想要的功能和插件。

你可以使用键盘的上下箭头键选择你想要的预设选项,然后按下回车键确认选择。根据你的选择,Vue CLI 将会为你创建一个相应配置的 Vue 项目。

完成选择之后就会开始安装。

  1. 等待项目创建: 选择完配置选项后,Vue CLI会开始创建项目并安装依赖。这可能需要一些时间,取决于你的网络连接速度和计算机性能。

现在我们的第一个vue项目成功的安装好了。

这就是咱们第一个vue项目的结构。

5. 在阿里云虚拟机安装和配置Nginx

Nginx是一个高性能的HTTP和反向代理服务器,用于将请求转发到后端服务器或处理静态资源。

首先,我们需要先在阿里云平台上拥有一台虚拟机。

第一步,登录阿里云官网

选择免费试用,点击第一个云服务器ECS,立即试用

这一步需要进行身份验证,在这里我选择个人验证。

点击授权之后使用支付宝扫码登录即可。

之后再次点击试用,就可以开始配置界面了。

这里我选择了2核4G,ubuntu操作系统,

之后点击立即试用即可,需要等待一段时间。

成功!

之后登录到虚拟机,更新包列表: 执行以下命令来更新系统的包列表,以获取最新的软件信息:

sudo apt update

  1. 安装Nginx: 执行以下命令来安装Nginx:

sudo apt install nginx

  1. 验证安装: 安装完成后,Nginx会自动启动。你可以使用以下命令检查其状态:

sudo systemctl status nginx

如果Nginx正在运行,状态将显示为active(运行)。

  1. 配置Nginx: Nginx的主要配置文件通常位于/etc/nginx/nginx.conf,而服务器块(用于定义网站配置)通常位于/etc/nginx/sites-available/。你需要编辑这些文件来配置Nginx以服务你的Vue应用。

6. 将Vue项目打包部署到Nginx下

Vue CLI提供了一个命令来构建生产环境可部署的静态文件。

步骤:

  1. 进入项目目录: 打开命令行,进入你的Vue项目根目录。
  2. 执行构建命令: 在命令行中执行以下命令来构建项目:

npm run build

这会在项目根目录的/dist目录下生成一个打包好的静态文件。

  1. 查看生成文件: 打开/dist目录,你会看到生成的静态文件。这些文件包含了你的Vue应用的所有资源,包括HTML、CSS、JavaScript等。

7. 访问部署的项目

最后一步是将打包生成的静态文件部署到Nginx服务器上,并通过浏览器访问你的网站。

步骤:

  1. 复制静态文件: 将/dist目录下的所有文件复制到Nginx配置的静态文件目录,通常是/var/www/html/。你可以使用以下命令来复制文件:

sudo cp -r dist/* /var/www/html/

这里为了方便我使用了MobaXterm来连接阿里云虚拟机进行操作,将打包好的dist文件夹复制到当前目录下,之后使用命令即可,之后我们应该可以成功访问我们的vue项目了。

  1. 访问网站: 打开一个浏览器,输入你的阿里云虚拟机的IP地址或域名,即可访问你部署的Vue项目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/528475.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3 +Taro 页面实现scroll-view 分页功能

需求 现在分页列表 后端只给你一个分页的数据列表 没有总页数 没有当前的分页 页数 只有这么一个list 、、、 如何去分页 我这使用的是scroll-view 组件 滑动到底部的事件 根据你当前设定的每页的数据数量和后端返回给你的数据列表数量 当某一次分页 两个数量不相等了以后 就…

群晖NAS使用Docker部署Potopea在线图片编辑工具并实现公网访问

文章目录 1. 部署Photopea2. 运行Photopea3. 群晖安装Cpolar4. 配置公网地址5. 公网访问测试6. 固定公网地址 本文主要介绍如何在群晖NAS使用Docker部署Potopea在线图片编辑工具,并结合cpolar内网穿透实现公网环境可以远程访问本地部署的Potopea. Photopea是一款强大…

【word技巧】Word文档打开密码,两种方法

想要保护Word文档不被任何人打开,保护文件内容,我们可以给word文档设置一个打开密码,今天分享word文档打开密码的两种设置方法。 给word文档设置打开密码有两种方法,方法如下: 方法一: 打开word文档之后…

HarmonyOS 开发-搜索页一镜到底案例

介绍 本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画,常用于首页搜索框点击进入搜索页场景。 效果图预览 使用说明 点击首页搜索框跳转到搜索页面显式一镜到底转场动画 实现思路 通过点击首页搜索框改变bindContentCover全屏模态…

Java绘图坐标体系

一、介绍 下图说明了Java坐标系。坐标原点位于左上角,以像素为单位。在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐…

【机器学习】深入解析机器学习基础

在本篇深入探讨中,我们将揭开机器学习背后的基础原理,这不仅包括其数学框架,更涵盖了从实际应用到理论探索的全方位视角。机器学习作为数据科学的重要分支,其力量来源于算法的能力,这些算法能够从数据中学习并做出预测…

甲方安全建设之研发安全-SCA

前言 大多数企业或多或少的会去采购第三方软件,或者研发同学在开发代码时,可能会去使用一些好用的软件包或者依赖包,但是如果这些包中存在恶意代码,又或者在安装包时不小心打错了字母安装了错误的软件包,则可能出现供…

移动端app如何设计测试用例?

1. 用户界面测试 布局和元素 验证所 有UI元素(如按钮、文本框、图像等)的位置和尺寸是否与设计图一致。 验证文本颜色、字体和大小是否易于阅读。 验证交互元素(如按钮)的点击区域是否足够大,易于触摸。 导航和流…

javaWeb车辆管理系统设计与实现

摘 要 随着经济的日益增长,车辆作为最重要的交通工具,在企事业单位中得以普及,单位的车辆数目已经远远不止简单的几辆,与此同时就产生了车辆资源的合理分配使用问题。 企业车辆管理系统运用现代化的计算机管理手段,不但可以对车辆的使用进行合理的管理,…

【算法】贪心算法练习一

个人主页 : zxctscl 如有转载请先通知 题目 1. 贪心算法的介绍2. 860. 柠檬水找零2.1 分析2.2 代码3. 2208. 将数组和减半的最少操作次数3.1 分析3.2 代码4. 179. 最大数4.1 分析4.2 代码 1. 贪心算法的介绍 一、贪心策略:解决问题的策略,局…

继续教育自考计算机及应用试题及答案,分享几个实用搜题和学习工具 #经验分享#知识分享

题目类型比较多,包含判断、单选、多选、填空等多种题型,适合各种职业考证搜题,比如医卫类、财会类、海外贸易等,大家可以根据自己的需求进行选择,而且直接输入题目内容就能搜索题目,很是方便。 1.试题猪 …

数据结构:构建完全二叉查找树

文章目录 1、步骤 1: 对给定数组排序2、步骤 2: 递归构建完全二叉查找树3、注意4、在有序数组中寻找根结点位置5、代码实现6、其他方法?基本思路插入操作删除操作特别考虑 对于一个给定序列的二叉查找树,有很多种,但是完全二叉查找树只有一种…

Windows安装Kibana

下载 注意:为了避免一些稀奇古怪的问题,kibana版本最好和es版本保持一致。 es版本查看: 官网下载地址: Download Kibana Free | Get Started Now | Elastichttps://www.elastic.co/cn/downloads/kibana如果是下载最新的&#x…

41---音频电路设计

视频链接 音频电路设计01_哔哩哔哩_bilibili 音频电路设计 1、音频基本介绍 1.1、设备 1.1.1、音频接口 型号:ABA-JAK-038-K44 电脑主机上的音频输出插口,一个是粉色的,用来连接麦克风或话筒,一个是绿色的,用来连…

【数据结构与算法】:归并排序和计数排序

1. 归并排序 归并排序是一种效率仅次于快速排序的排序算法。它有非递归和递归两种实现方式(本文只讲述递归实现,非递归实现以后有专门的文章)。 其实,归并排序也叫外排序。它不仅可以对内存中的数据进行排序,还能对文件里的数据排序。 比如&…

网站压力测试和Locust

一、压力测试介绍 网站压力测试是一种评估网站性能、可靠性和稳定性的方法。它通过模拟大量用户同时访问网站,来测试网站的响应时间、吞吐量、资源利用率等指标,从而发现网站的潜在问题和瓶颈。下面我将从几个方面详细介绍网站压力测试: 1、压力测试的目的 评估网站在高并发…

路由器端口映射是什么意思?

路由器端口映射是一种网络配置技术,在私有网络中允许外部网络访问特定的服务或应用程序。通过将路由器的端口映射到内部客户端设备,可以实现从公共网络访问内部网络资源的目的。 天联组网介绍 天联是一款异地组网内网穿透产品,由北京金万维科…

【Qt】:常用控件(九:容器类控件)

常用控件 一.Group Box(分组框)二.Tab Widget(标签页) 一.Group Box(分组框) 使用QGroupBox实现一个带有标题的分组框.可以把其他的控件放到里面作为一组.这样看起来能更好看一点.(换言之&…

复现bytetrack时,安装依赖项报错“: ERROR: Failed building wheel for lap

报错原因: lap 库的构建失败,因为缺少了 NumPy 库。 解决办法: 安装 NumPy 库:NumPy 是 Python 中用于科学计算的基础库,lap 依赖于它 pip install numpy 重新安装 lap 库: pip install lap

代码随想录|Day32|贪心算法 part02|● 122.买卖股票的最佳时机II ● 55. 跳跃游戏 ● 45.跳跃游戏II

122.买卖股票的最佳时机II class Solution: def maxProfit(self, prices: List[int]) -> int: result 0 for i in range(len(prices) - 1): count prices[i1] - prices[i] if count > 0: result count return result 方法二:把if条件变成max class Solutio…