• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 如何快速搭建uni-app项目?两种搭建方法分享

如何快速搭建uni-app项目?两种搭建方法分享

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了快速搭建uni-app项目,uni-app搭建方法等相关知识,希望对您有所帮助

如何快速搭建uni-app项目?下面本篇文章给大家介绍一下从零搭建uni-app项目的两种方法,希望对大家有所帮助!


如何快速搭建uni-app项目?两种搭建方法分享


uni-app 是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

方式一: 使用HBuilderX来快速开发和运行

第一步:准备好HbuilderX工具

uni-app官网有相关的介绍,要下载app开发版本的HbuilderX工具。

第二步:新建一个uni-app的项目,选择空项目。


如何快速搭建uni-app项目?两种搭建方法分享


uni-app的默认模板项目里面文件夹结构是这样的:


如何快速搭建uni-app项目?两种搭建方法分享


pages---用来存放页面文件路径;

static---引用的静态资源目录,如图片、视频等文件;

App.vue--- 应用配置,用来配置全局样式及监听文件;

main.js---- vue初始化入口文件;

mainfest.json----配置应用名称、appid、logo、版本等打包信息文件;

pages.json---- 配置页面路由、导航条、选项卡等页面类信息文件。


第三步:运行项目。

点击工具栏里的【运行】选项,在下拉框中选择不同的运行环境即可。可以参考官网步骤。

因为最近的项目是在微信端,这里就介绍下微信端运行的相关事宜。

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。


如何快速搭建uni-app项目?两种搭建方法分享


注意: 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。在HbuilderX中需要在工具->配置->运行配置,找到小程序运行配置,将微信开发者工具路径复制到里面。


如何快速搭建uni-app项目?两种搭建方法分享


方式二: 使用脚手架来快速搭建和开发

全局安装:npm i -g @vue/cli (之前安装过可跳过此步->2):因为uni-app是基于vue3.0以上的,所以要更新vue到合适版本;

创建项目:vue create -p dcloudio/uni-preset-vue my-project(你自己创建项目的名字)

按照提示,直接Enter;

启动(微信小程序):npm run dev:mp-weixin

微信小程序开发者工具导入项目:需要手动导入小程序项目。


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 如何快速搭建uni-app项目?两种搭建方法分享

相关文章

  • 2022-04-29DedeCMS获取栏目图片如果没有栏目图片调用顶级图片
  • 2022-04-29Dedecms后台登录验证码不正常显示怎么办
  • 2022-04-29DEDECMS给list标签加上多字段排序功能
  • 2022-04-29JavaScript字符串截取方法有哪些?
  • 2022-04-29Illustrator创建渐变色效果的进度按钮
  • 2022-04-29vue中h5端打开app(判断是安卓还是苹果)
  • 2022-04-29Ember.js和Vue.js对比,哪个框架更优秀?
  • 2022-04-29替换uploadify用Huploadify实现上传图片或文件
  • 2022-04-29Photoshop制作一个古典的小木箱
  • 2022-04-29基于开发中使用UEditor编辑器的注意事项详解

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 解析关于Thinkphp5复合型缓存的使用问题
    • Discuz后台计划任务不运行解决方法
    • 深入解析asp.net中mvc4自定义404页面(分享)
    • DedeCMS织梦模板使likearticle标签支持排序orderby的方法
    • VUE动态添加的路由页面刷新时失效的原因及解决方案
    • 百度频繁变更算法,我们该怎么办?
    • 织梦dedecms网站六大SEO优化技巧分享
    • 浅析利用nodejs怎么给图片添加半透明水印(方法详解)
    • 解析ThinkPHP5之 _initialize() 初始化方法
    • PhotoShop打造五彩抽象透明的圆球形图标制作教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有