vue搭建一个h5页面步骤（彻底学会快速部署vue框架，一篇就够了）

为什么要使用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 来创建项目    
    
    
  ，生成应用和库代码   


     


     


     
，以及执行各种持续开发任务



 




 




 




，比如测试



 




 




 




、打包和部署
















。

要安装新软件包   

   

   

 ，请使用以下命令之一：

npm install -g @vue/cli npm install -g @vue/cli 安装后    

     

     

     ，您将可以在命令行中访问vue二进制文件                  。您可以通过简单地运行来验证它是否已正确安装vue




  




  




  




，它应该会向您显示一条列出所有可用命令的帮助消息  



     



     



     

。

您可以使用以下命令检查您是否拥有正确的版本： vue --version

二   

   

   

 、创建新的初始应用

要想创建一个新的初始应用项目  


  


  


，请执行： vue create hello-world

系统将显示您选择的默认功能

















。可以选择基本 Babel + ESL 设置的默认默认值     
     
     
     ，或者选择“手动选择  
    
    
    
”来选择您的功能    
    
    
  。

设置非常适合这些快速制作的新项目需要的原型




   




   




   



，而手动设置的选项可能会提供更多默认提供的项目   


     


     


     
。

您选择手动选择的因素
 



 



 



，当您选择将选择保存时                   ，您还可以选择保存为我们预设的 




    




    




    


，以便继续使用



 




 




 




。

三    

     

     

     、启动应用服务器

进入工作区目录
















，并启动这个应用   

   

   

 。

cd hello-world yarn serve

npm start命令会构建本应用




  




  




  




、启动开发服务器  


  


  


、监听源文件                  ，并且当那些文件发生变化时重新构建本应用  



     



     



     

，

也会打开浏览器

















，并访问 http://localhost:8080/     

     

     

     。

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




  




  




  




。

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

云平台一键部署Vue

作为Vue开发者的你    
    
    
  ，云开发平台为你提供了一站式   


     


     


     
，全云端的开发平台



 




 




 




，让你可以打开浏览器就完成开发   

   

   

 ，调试    

     

     

     ，上线




  




  




  




，同时云开发平台底层调用的是阿里云集团Serverless产品  


  


  


，可以实现低门槛开发     
     
     
     ，部署




   




   




   



，调试
 



 



 



，降低开发上手成本                   ，让Vue应用可以一键快速部署！

一     
     
     
     、创建环境

想要一键部署Vue 




    




    




    


，需要以下账号和服务：

Github账号 (https://github.com/)
















， 阿里云账号                  ，并使用阿里云账号登录云开发平台 (https://workbench.aliyun.com/)   



     



     



     

，为保证最好的使用体验

















，请使用Chrome浏览器  


  


  


。开通OSS服务     
     
     
     。 未开通阿里云OSS的用户    
    
    
  ，点击链接 (https://workbench.aliyun.com/product/open?code=oss) 开通OSS服务




   




   




   



。OSS开通免费   


     


     


     
，有一定的免费额度



 




 




 




，超过额度之后按量付费
 



 



 



。

二




   




   




   



、创建Vue应用

创建前端应用                   。打开快速开始 https://workbench.aliyun.com/app    

   

   

 ，找到Vue点击创建「创建应用」按钮 




    




    




    


。 云资源访问授权
















。如果您之前没有使用过云开发平台    

     

     

     ，会出现云资源授权管理的选项




  




  




  




，往下拉出现直至同意授权的字样  


  


  


，点击「同意授权」后出现授权成功     
     
     
     ，点击进入「下一步」                  。 绑定Github账号  



     



     



     

。授权完成后选择来源仓库为Github




   




   




   



，按照提示点击去绑定
 



 



 



，绑定GitHub帐号                   ，登录后并点击Authorize Aliyunworkben允许云开发平台构建
 



 



 



、发布你的GitHub代码为可访问的网站

















。 选择fork好的“Vue

     


     


     


  ”代码仓库    
    
    
  。选择第一步中的代码仓库 




    




    




    


，主干分支
















，并点击下一步   


     


     


     
。主干分支一般指的是代码的master或main等分支



 




 




 




。

填写基本信息                  ，完成创建   

   

   

 。填写基本信息并点击「完成」    

     

     

     。成功后进入到应用详情和部署界面




  




  




  




。

三                   、在日常环境部署

一键进行应用部署  


  


  


。在应用详情页面点击日常环境的「部署」按钮进行一键部署  



     



     



     

，部署状态变成绿色已部署以后可以点击访问部署网站查看效果     
     
     
     。 访问Vue网站




   




   




   



。日常环境的测试域名也是可以访问的

















，点击访问已部署网站按钮会出现一个弹出    
    
    
  ，点击弹出上的立即访问就能够访问已经部署好的站点了
 



 



 



。在部署完成后   


     


     


     
，可以继续本地编码



 




 




 




，并将代码push到应用的“基本信息 




 




 




 
”中对应的代码仓库内                   。

阿里云开发平台多端应用

在平台中拥有热门开源应用的中心   

   

   

 ，以此去为每一位开发者的开发之路保驾护航 




    




    




    


。目前共涵盖多个领域    

     

     

     ，不乏像Vue.js 




    




    




    


、React
















、Nuxt.js                  、Next.js  



     



     



     

、AntDesign等热门必备的框架




  




  




  




，也包含了内容管理平台Hexo

















、Docusaurus    
    
    
  、VuePress   


     


     


     
、Sapper等
















。提供给您了一个免费



 




 




 




、便捷的云上研发工作平台  


  


  


，通过学习与实操演练两种模式     
     
     
     ，从入门到精通快速上手Serverless和云开发技术                  。0门槛全云端开发   

   

   

 、随时随地在线协同    

     

     

     、业界领先Serverless架构




  




  




  




、行业应用一件初始化等特性也同步在每一次的实践  



     



     



     

。

云原生应用  


  


  


、主机应用部署     
     
     
     、前端应用部署三大板块的支持




   




   




   



，也供开发者们找到最合适自己神器
 



 



 



，令开发工作事半功倍

















。其中满足IoT语音技能




   




   




   



、小程序
 



 



 



、H5应用等开发者低门槛应用开发的需求；也支持代码编译部署到ECS主机服务器的场景                   ，帮助用户管理传统主机应用的能力；让前后端应用能够更高效地协同    
    
    
  。平台将持续与开发者一起共同成长 




    




    




    


，帮忙开发者更好                   、更快以及更低成本的开发
















，多端的应用更加快速的上云   


     


     


     
。