目录
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界面。
主要特点:
- 响应式数据绑定:Vue使用了响应式的数据绑定机制,当数据发生变化时,相关的视图会自动更新,使得开发者不需要手动操作DOM。
- 组件化开发:Vue采用了组件化的开发方式,将应用拆分为多个组件,每个组件都有自己的状态和视图,可以重用和组合,使得应用的开发和维护更加简单和高效。
- 虚拟DOM:Vue通过虚拟DOM机制,将对DOM的操作转化为对虚拟DOM的操作,然后将虚拟DOM与真实DOM进行比对,最终只更新发生变化的部分,从而提高性能。
- 简洁优雅:Vue的API设计简洁明了,学习曲线较为平缓,易于上手。同时,Vue也提供了丰富的功能和扩展性,满足了各种规模的项目需求。
- 社区支持: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之间的关系:
- 前后端分离开发: 在现代Web开发中,通常采用前后端分离的架构。Vue.js用于构建前端用户界面,而Node.js用于构建后端服务器和API。Vue.js发送HTTP请求到Node.js后端,后端处理请求并返回数据,前端再将数据渲染到页面上。
- 全栈开发: 有些开发者同时具备前端和后端开发的能力,他们可以在同一个项目中使用Vue.js和Node.js。例如,使用Vue.js构建前端界面,同时使用Node.js构建后端服务和API,这样可以更好地协同开发和部署。
- 构建SSR(服务器端渲染)应用: Vue.js和Node.js也可以一起用于构建服务器端渲染(SSR)的应用。Node.js作为后端服务器,用于渲染Vue组件并返回已渲染的HTML页面给客户端,这种方式可以提高应用的首屏加载速度和SEO优化。
阿里云虚拟机(ECS):
阿里云虚拟机,也称为Elastic Compute Service(ECS),是阿里云提供的一种弹性计算服务,它可以让你在云端轻松创建和管理虚拟机实例,以运行各种类型的应用程序。
主要特点:
- 弹性和可扩展性:你可以根据实际需求随时增加或减少虚拟机实例的数量,以应对流量的变化和应用的需求。
- 灵活的配置选项:阿里云虚拟机提供了各种不同类型和规格的实例供选择,以满足不同应用场景的需求。你可以选择CPU、内存、存储等配置来配置虚拟机实例。
- 安全可靠:阿里云虚拟机提供了安全加固、网络隔离、数据加密等安全功能,保障你的应用数据的安全和隐私。
- 弹性网络:你可以灵活配置网络规则、访问控制和安全组等网络设置,以确保你的虚拟机实例能够安全、高效地与其他资源通信。
- 全球部署:阿里云虚拟机支持全球范围内的多个地域和可用区,你可以根据用户分布和应用需求选择合适的地域来部署虚拟机实例,提供更快的访问速度和更稳定的服务。
Nginx:
Nginx是一个高性能的开源HTTP和反向代理服务器,也是一个通用的TCP/UDP代理服务器。它被设计用来处理高并发的网络流量,并提供了许多高级功能和配置选项,使其成为构建可靠、安全和高效的Web服务的理想选择。
主要特点:
- 高性能:Nginx采用了事件驱动、异步非阻塞的架构,能够高效处理大量并发请求,适用于高负载的Web服务场景。
- 反向代理:Nginx可以作为反向代理服务器,接收客户端的请求并转发到后端的应用服务器,提供负载均衡、缓存、SSL终端等功能,从而提高网站的性能和可靠性。
- 静态文件服务:Nginx可以直接提供静态文件的服务,无需转发请求到应用服务器,加快了静态资源的访问速度。
- 高度可定制性:Nginx提供了丰富的配置选项和模块化的架构,使得用户可以根据自己的需求灵活定制和扩展服务器功能。
- 负载均衡:Nginx支持基于轮询、IP哈希、最少连接等算法的负载均衡,可以将请求分发到多个后端服务器上,提高系统的稳定性和可用性。
- 动态模块加载:Nginx支持动态模块加载,用户可以根据需要动态加载或卸载模块,而无需重新编译和部署Nginx服务器。
- 高级的安全功能:Nginx提供了许多安全功能,如访问控制、防盗链、DDoS防护等,可以保护Web服务器免受各种网络攻击。
2. 安装Node.js
Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用于构建服务器端应用程序。
步骤:
- 访问Node.js官网: 打开浏览器并访问Node.js官网。
- 下载安装程序: 根据你的操作系统选择适用的安装程序。一般情况下,Node.js提供了适用于Windows、macOS和Linux的安装程序。选择与你操作系统相匹配的版本,并点击下载。
在这里我根据自己电脑的情况选择在winodws下的64位安装包
这里的下载过程一般会比较慢,需要耐心等待,也可以选择通过其他方式下载vue.js的安装包,但需要注意其安全性。
- 运行安装程序: 下载完成后,运行安装程序。在Windows上,你将看到一个安装向导;在macOS上,你将看到一个.pkg文件;在Linux上,你可能需要使用包管理器(如apt或yum)进行安装。
- 按照提示安装: 安装过程中,你可能需要接受许可协议、选择安装路径等。根据向导的提示逐步完成安装过程。
- 验证安装: 安装完成后,打开命令行终端(Windows用户可以使用PowerShell或命令提示符),输入以下命令来验证Node.js和npm(Node.js包管理器)是否成功安装:
node -v npm -v
如果成功安装,将会显示Node.js和npm的版本号。
3. 全局安装Vue CLI (脚手架工具)
Vue CLI是Vue.js的官方脚手架工具,用于快速搭建Vue.js项目。
步骤:
- 打开命令行/终端: 打开命令行终端。
- 执行全局安装命令: 在命令行中输入以下命令,以全局安装Vue CLI:
npm install -g @vue/cli
这会将Vue CLI安装到全局环境中,使其可以在任何目录下使用。
- 等待安装完成: 安装过程可能需要一些时间,取决于你的网络连接速度和计算机性能。
当出现added等等消息的时候就是已经安装好了
- 验证安装: 安装完成后,你可以输入以下命令来验证Vue CLI是否成功安装:
vue --version
如果成功安装,将会显示Vue CLI的版本号。
4. 创建一个新的Vue项目
使用Vue CLI可以快速创建一个新的Vue.js项目。
步骤:
- 执行创建命令: 在命令行中执行以下命令来创建新的Vue项目:
vue create my-vue-app
其中,my-vue-app是你想要创建的项目名称,你可以根据实际情况修改。
- 选择配置选项: 执行命令后,Vue CLI会提示你选择一些配置选项。你可以使用上下箭头键来浏览选项,并使用回车键来选择。通常,你可以选择默认配置,但也可以手动选择特性和插件。
这个警告是因为你正在使用的Node.js版本中的"punycode"模块已经被弃用了。你可以选择使用一个"用户地"的替代方案来替代它。不过,这个警告不会影响你创建Vue应用程序。
至于npm registry连接速度较慢的提示,这是因为你当前连接的npm registry可能速度较慢。提示建议你切换到一个更快的镜像站点来加快安装速度。通常情况下,使用提供了更快速度的镜像站点是一个好主意。
如果你愿意切换到更快的npm registry镜像,你可以按照提示输入"Y",然后按下回车。这样npm将使用提供更快速度的镜像站点来安装依赖。如果你不想切换,可以输入"N",然后按下回车。
所以,你可以根据你的偏好选择"Y"或者"N"来继续。
在这里,Vue CLI 提供了几个预设选项供你选择,以便快速设置你的 Vue 项目。以下是每个选项的简要说明:
- Default ([Vue 3] babel, eslint):
- 这是默认的预设选项,使用 Vue 3 版本。它包含了 Babel 和 ESLint 插件,用于将 Vue 代码编译成向后兼容的 JavaScript 代码,并进行代码风格检查。
- Default ([Vue 2] babel, eslint):
- 同样是默认的预设选项,但使用的是 Vue 2 版本。它也包含了 Babel 和 ESLint 插件,用于编译和检查 Vue 2 代码。
- Default (Vue 3) Manually select features:
- 与第一个选项类似,但提供了手动选择功能的选项。这使你可以在下一步中手动选择你想要的功能和插件。
你可以使用键盘的上下箭头键选择你想要的预设选项,然后按下回车键确认选择。根据你的选择,Vue CLI 将会为你创建一个相应配置的 Vue 项目。
完成选择之后就会开始安装。
- 等待项目创建: 选择完配置选项后,Vue CLI会开始创建项目并安装依赖。这可能需要一些时间,取决于你的网络连接速度和计算机性能。
现在我们的第一个vue项目成功的安装好了。
这就是咱们第一个vue项目的结构。
5. 在阿里云虚拟机安装和配置Nginx
Nginx是一个高性能的HTTP和反向代理服务器,用于将请求转发到后端服务器或处理静态资源。
首先,我们需要先在阿里云平台上拥有一台虚拟机。
第一步,登录阿里云官网
选择免费试用,点击第一个云服务器ECS,立即试用
这一步需要进行身份验证,在这里我选择个人验证。
点击授权之后使用支付宝扫码登录即可。
之后再次点击试用,就可以开始配置界面了。
这里我选择了2核4G,ubuntu操作系统,
之后点击立即试用即可,需要等待一段时间。
成功!
之后登录到虚拟机,更新包列表: 执行以下命令来更新系统的包列表,以获取最新的软件信息:
sudo apt update
- 安装Nginx: 执行以下命令来安装Nginx:
sudo apt install nginx
- 验证安装: 安装完成后,Nginx会自动启动。你可以使用以下命令检查其状态:
sudo systemctl status nginx
如果Nginx正在运行,状态将显示为active(运行)。
- 配置Nginx: Nginx的主要配置文件通常位于/etc/nginx/nginx.conf,而服务器块(用于定义网站配置)通常位于/etc/nginx/sites-available/。你需要编辑这些文件来配置Nginx以服务你的Vue应用。
6. 将Vue项目打包部署到Nginx下
Vue CLI提供了一个命令来构建生产环境可部署的静态文件。
步骤:
- 进入项目目录: 打开命令行,进入你的Vue项目根目录。
- 执行构建命令: 在命令行中执行以下命令来构建项目:
npm run build
这会在项目根目录的/dist目录下生成一个打包好的静态文件。
- 查看生成文件: 打开/dist目录,你会看到生成的静态文件。这些文件包含了你的Vue应用的所有资源,包括HTML、CSS、JavaScript等。
7. 访问部署的项目
最后一步是将打包生成的静态文件部署到Nginx服务器上,并通过浏览器访问你的网站。
步骤:
- 复制静态文件: 将/dist目录下的所有文件复制到Nginx配置的静态文件目录,通常是/var/www/html/。你可以使用以下命令来复制文件:
sudo cp -r dist/* /var/www/html/
这里为了方便我使用了MobaXterm来连接阿里云虚拟机进行操作,将打包好的dist文件夹复制到当前目录下,之后使用命令即可,之后我们应该可以成功访问我们的vue项目了。
- 访问网站: 打开一个浏览器,输入你的阿里云虚拟机的IP地址或域名,即可访问你部署的Vue项目。