做网站或者app,咨询聊城网站建设,预付做网站订金怎么做账,深圳成交型网站建设公司uniapp cli开发和HBuilderX开发
前言
uniapp是一个跨平台的开发框架#xff0c;可以开发出微信小程序、支付宝小程序、百度小程序、头条小程序、H5、App等#xff0c;开发者只需要写一套代码#xff0c;就可以发布到各个平台#xff0c;大大提高了开发效率。
uniapp的开…uniapp cli开发和HBuilderX开发
前言
uniapp是一个跨平台的开发框架可以开发出微信小程序、支付宝小程序、百度小程序、头条小程序、H5、App等开发者只需要写一套代码就可以发布到各个平台大大提高了开发效率。
uniapp的开发方式有两种
HBuilderX开发可视化应用工具cli开发命令行开发工具
使用哪种方式开发取决于你的习惯我个人比较喜欢用cli开发因为我觉得用命令行开发更加灵活而且可以使用vscode等编辑器而不是HBuilderX自带的编辑器。
1. cli开发和HBuilderX开发的区别
cli开发和HBuilderX开发的区别主要在于开发方式不同HBuilderX开发是可视化的而cli开发是命令行的。
他们之间可以相互转换比如你可以用HBuilderX开发然后用cli打包也可以用cli开发然后用HBuilderX打包。
操作步骤如下
cli项目转HBuilderX项目在HBuilderX中新建uniapp项目然后把cli项目的src目录复制到HBuilderX项目中然后在HBuilderX中运行即可。HBuilderX项目转cli项目通过cli命令创建一个新的项目然后把HBuilderX项目复制到cli项目中的src目录中然后在cli中运行即可。
因为HBuilderX开发是可视化的所以这里主要介绍cli开发。
安装HBuilderXhttps://www.dcloud.io/hbuilderx.html
2. cli开发环境搭建
2.1 安装nodejs
uniapp cli是基于nodejs开发的所以需要先安装nodejs。 安装方式有很多种你可以浏览器搜索nodejs安装相关的教程内容。
以下是相对不太友好的安装方式(主要用于增加博客的浏览量)
安装nodejshttps://blog.csdn.net/qq_41974199/article/details/119328353安装完成后打开命令行输入node -v如果能正常输出版本号说明安装成功。
2.2 安装 vue-cli
vue-cli是vue的脚手架工具可以快速创建vue项目。
npm install -g vue/cli安装完成后打开命令行输入vue --version如果能正常输出版本号说明安装成功。
2.3 安装 uniapp cli
vue create -p dcloudio/uni-preset-vue my-projectnpm install postcsslatest autoprefixerlatest --save-devnpm install sass --save-dev2.4 运行项目
npm run dev:h5命令格式npm run dev:%PLATFORM%
%PLATFORM%平台比如微信小程序就是dev:mp-weixinH5就是dev:h5具体可以查看package.json文件中的scripts字段。 3. 成功
访问http://localhost:8080/
