基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)

简介: 基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)

除了使用HBuilderX工具可视化搭建项目外,DCloud官方还提供了一个脚手架用于命令行搭建项目。


uni-app项目支持 uni cli和 HBuilderX cli两种脚手架工具:


  • uni cli:面向非HBuilderX的用户(如习惯使用vscode/webstorm的开发者),提供创建项目、编译发行等能力;在App平台,仅支持生成离线打包的wgt资源包,不支持云端打包生成apk/ipa;若需云端打包,依然需要安装HBuilderX,使用HBuilderX cli。


  • HBuilderX cli:面向HBuilderX用户的自动化工具,提供uni-app项目的持续集成能力;支持通过HBuilderX cli进行web打包、小程序打包、App云端打包、部署uniCloud等;但注意HBuilderX暂不支持linux平台。另外注意HBuilderX cli不基于npm,它是HBuilderX安装目录下的cli.exe。

提供有完整的cli 脚手架,可以通过 vue-cli 创建、运行、发行 uni-app 项目。


一、环境安装

全局安装vue-cli

npm i @vue/cli@4 -g

建议使用vue-cli 4.x版本,vue-cli 5.x与webpack存在冲突,会导致运行报错


二、创建项目
1、安装预设模板

使用vue-cli安装预设模板。

vue create -p dcloudio/uni-preset-vue projectName

dcloud提供了多个预设版本

//对应HBuilderX最新alpha版
vue create -p dcloudio/uni-preset-vue#alpha projectName

//使用Vue3/Vite js版本
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

//使用Vue3/Vite ts版本
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

此时,会提示选择项目模板(使用Vue3/Vite版不会提示,目前只支持创建默认模板),初次体验建议选择 hello uni-app 项目模板。



2、注意

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0


模板项目存放于 Github,由于国内网络环境问题,可能下载失败。针对此问题可以尝试如下措施:

  1. 更换网络重试,比如使用 4g 网络
  2. 在设备或路由器的网络设置中增加 DNS(如:8.8.8.8)
  3. 在设备中增加固定的 hosts(如:140.82.113.4 github.com)
2、安装依赖

打开 在src文件找到mainfest.json文件将AppId填入

进入项目路径运行

npm install
3、运行项目
npm run dev:mp-weixin
4、发行项目
npm run build:mp-weixin

运行成功后会再项目中生成一个dist目录,里边存在build/mp-weixin项目,就是打包编译后微信小程序代码。可以直接在微信开发者工具中运行。


5、注意:

vue2发布到App平台时,平台参数为app-plus;vue3发布到App平台时,平台参数为app;


uni cli在App平台,仅支持生成离线打包的wgt资源包,不支持云端打包生成apk/ipa;若需云端打包,依然需要安装HBuilderX,使用HBuilderX cli。


三、开发环境和生产环境

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

  • 在 HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境。
  • cli 模式下,是通行的编译环境处理方式。
if (process.env.NODE_ENV === 'development') {
  console.log('开发环境');
} else {
  console.log('生产环境');
}

HBuilderX 中敲入代码块 uEnvDev、uEnvProd 可以快速生成对应 development、production 的运行环境判定代码。

// uEnvDev
if (process.env.NODE_ENV === 'development') {
  // TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
  // TODO
}


四、其他扩展
1、可以在项目根目录中配置vue.config.js文件在打包中删除console.log及注释。

使用terser-webpack-plugin插件移除注释和console

如果你使用的是 webpack v5 或以上版本,你不需要安装这个插件。webpack v5 自带最新的 terser-webpack-plugin。如果使用 webpack v4,则必须安装 terser-webpack-plugin v4 的版本。


  1. 安装 terser-webpack-plugin
npm install terser-webpack-plugin --save-dev
  1. 将插件添加到你的 webpack 配置文件中
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false,
            },
            // 删除console
            compress: {
              drop_console: true,
              pure_funcs: ['console.log'],
            },
          },
        }),
      ],
    }
  },
};


2、安装uview组件库
  1. 安装UI组件库
npm i uview-ui
  1. main.js引入uview
import uView from "uview-ui";
Vue.use(uView);
  1. 在全局样式文件uni.scss中引入
@import 'uview-ui/theme.scss';
  1. 在pages.json中 配置easycom组件模式(打包的时候是按需引入)
"easycom": {
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
  }
  1. 在vue.config.js中加入
module.exports = {
    transpileDependencies: ['uview-ui']
}
  1. 在pages下页面中使用
<u-button type="primary">主要按钮</u-button>
目录
相关文章
|
12天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
15天前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
76 12
|
17天前
|
存储 监控 小程序
TP6+Uni-app框架下,圈子系统小程序的快速上线开发步骤
社交圈子系统多端运营级应用,融合了推荐匹配、语音聊天、IM即时通讯、动态发布、一键约聊、同城交友、附近的人、充值提现、邀请推广等功能,为平台运营提供更多的盈利变现方式。程序源码开源,支持二次开发,根据客户不同应用场景需求,定制个性化解决方案。
45 9
|
11天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
15天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
14 0
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
922 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
897 1
|
4月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
244 7
ly~
|
5月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
105 6
|
4月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
311 1

热门文章

最新文章

推荐镜像

更多