为什么要使用Vue

Vue框架诞生于2014年,其作者为中国人——尤雨溪,也是新人最容易入手的框架之一,不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库,是一个用于构建用户界面的渐进式框架。与其他单体框架不同,Vue 从头开始设计为可逐步采用。核心库仅专注于视图层,易于获取并与其他库或现有项目集成。另一方面,当与现代工具和支持库结合使用时,Vue 也完全能够为复杂的单页应用程序提供支持。

通过本教程中,你将从头开始构建自己的应用,分别使用Vue CLI 和 云开发平台

Vue-CLI 快速搭建项目

一、搭建本地开发环境

  • Vue CLI 4.x 需要Node.js 8.9 或更高版本(推荐v10+)。您可以使用n、nvm或nvm-windows 在同一台机器上管理多个版本的Node。 要了解如何安装 Node.js,参阅nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么,请在终端窗口中运行node -v。
  • npm 包管理器 因为我们通常都会使用react 提供的脚手架搭建项目结构,所以要下载并安装 npm 包并且npm >= 5.6,你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面,该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端,请在终端窗口中运行 npm -v 。
  • 你可以使用 Vue CLI 来创建项目,生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。
    要安装新软件包,请使用以下命令之一:
  1. npm install -g @vue/cli
  2. npm install -g @vue/cli
  • 安装后,您将可以在命令行中访问vue二进制文件。您可以通过简单地运行来验证它是否已正确安装vue,它应该会向您显示一条列出所有可用命令的帮助消息。
    您可以使用以下命令检查您是否拥有正确的版本:
    1. vue --version

二、创建新的初始应用

  • 要想创建一个新的初始应用项目,请执行:
    1. vue create hello-world
    系统将显示您选择的默认功能。可以选择基本 Babel + ESL 设置的默认默认值,或者选择“手动选择”来选择您的功能。

file

设置非常适合这些快速制作的新项目需要的原型,而手动设置的选项可能会提供更多默认提供的项目。

file

您选择手动选择的因素,当您选择将选择保存时,您还可以选择保存为我们预设的,以便继续使用。

三、启动应用服务器

进入工作区目录,并启动这个应用。

  1. cd hello-world
  2. yarn serve

npm start命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用,
也会打开浏览器,并访问 http://localhost:8080/

你会发现本应用正运行在浏览器中。

参考文献:https://cli.vuejs.org/

云平台一键部署Vue

作为Vue开发者的你,云开发平台为你提供了一站式,全云端的开发平台,让你可以打开浏览器就完成开发,调试,上线,同时云开发平台底层调用的是阿里云集团Serverless产品,可以实现低门槛开发,部署,调试,降低开发上手成本,让Vue应用可以一键快速部署!

一、创建环境

想要一键部署Vue,需要以下账号和服务:

file

二、创建Vue应用

file

  • 云资源访问授权。如果您之前没有使用过云开发平台,会出现云资源授权管理的选项,往下拉出现直至同意授权的字样,点击「同意授权」后出现授权成功,点击进入「下一步」。

file

  • 绑定Github账号。授权完成后选择来源仓库为Github,按照提示点击去绑定,绑定GitHub帐号,登录后并点击Authorize Aliyunworkben允许云开发平台构建、发布你的GitHub代码为可访问的网站。

file

  • 选择fork好的“Vue”代码仓库。选择第一步中的代码仓库,主干分支,并点击下一步。主干分支一般指的是代码的master或main等分支。

file

填写基本信息,完成创建。填写基本信息并点击「完成」。成功后进入到应用详情和部署界面。

file

三、在日常环境部署

  • 一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。

file

  • 访问Vue网站。日常环境的测试域名也是可以访问的,点击访问已部署网站按钮会出现一个弹出,点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后,可以继续本地编码,并将代码push到应用的“基本信息”中对应的代码仓库内。

file

阿里云开发平台多端应用

在平台中拥有热门开源应用的中心,以此去为每一位开发者的开发之路保驾护航。目前共涵盖多个领域,不乏像Vue.js、React、Nuxt.js、Next.js、AntDesign等热门必备的框架,也包含了内容管理平台Hexo、Docusaurus、VuePress、Sapper等。提供给您了一个免费、便捷的云上研发工作平台,通过学习与实操演练两种模式,从入门到精通快速上手Serverless和云开发技术。0门槛全云端开发、随时随地在线协同、业界领先Serverless架构、行业应用一件初始化等特性也同步在每一次的实践。

云原生应用、主机应用部署、前端应用部署三大板块的支持,也供开发者们找到最合适自己神器,令开发工作事半功倍。其中满足IoT语音技能、小程序、H5应用等开发者低门槛应用开发的需求;也支持代码编译部署到ECS主机服务器的场景,帮助用户管理传统主机应用的能力;让前后端应用能够更高效地协同。平台将持续与开发者一起共同成长,帮忙开发者更好、更快以及更低成本的开发,多端的应用更加快速的上云。

file

更多相关文章

  1. android 如何判断程序是否在前台运行
  2. Android创建快捷方式(shortcut)
  3. 强制 Android(安卓)应用使用某个 Locale
  4. Android获取Manifest中元素的值
  5. Android中如何获取应用版本号
  6. 访问器属性原理与应用场景,获取DOM元素的2个方法
  7. Android中Message机制的灵活应用
  8. android一键清除最近应用按钮
  9. Android小代码——设置全屏

随机推荐

  1. Android xmlns 的作用及其自定义
  2. Android Handler机制1之Thread
  3. 对于android中自定义组件属性的理解
  4. 知识梳理之Android进程
  5. 我的Android心得(7)--TabActivity
  6. 让android支持RTSP(live555分析)
  7. android进阶
  8. android之4.0的系统主题style修改android
  9. android:gravity
  10. Android渗透测试虚拟机环境(VM)—AppUse