如何通过 `vue-cli` 创建 `uni-app` 项目
【摘要】 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括PC和移动端）、以及各种小程序（微信/支付宝/百度等）平台。而vue-cli是Vue.js的官方命令行工具，用于快速生成Vue.js项目。
前言
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括PC和移动端）、以及各种小程序（微信/支付宝/百度等）平台。而vue-cli是Vue.js的官方命令行工具，用于快速生成Vue.js项目。
全局安装 vue-cli
npm install -g @vue/cli
创建 uni-app
- 使用 Vue3/Vite 版(Vue3/Vite 版要求 node 版本 18+、20+
)
- 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
- 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
vscode打开项目
- 打开
package.json查看调试命令
- 运行、发布uni-app
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 可取值如下
| 值 | 平台 |
|---|---|
| app-plus | app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作） |
| h5 | H5 |
| mp-alipay | 支付宝小程序 |
| mp-baidu | 百度小程序 |
| mp-weixin | 微信小程序 |
| mp-toutiao | 抖音小程序 |
| mp-lark | 飞书小程序 |
| mp-qq | qq 小程序 |
| mp-360 | 360 小程序 |
| mp-kuaishou | 快手小程序 |
| mp-jd | 京东小程序 |
| mp-xhs | 小红书小程序 |
| quickapp-webview | 快应用(webview) |
| quickapp-webview-union | 快应用联盟 |
| quickapp-webview-huawei | 快应用华为 |
运行并发布小程序(如微信小程序)
- 安装依赖
npm install
- 运行开发环境
npm run dev:mp-weixin
- 运行方式：打开
微信开发者工具, 导入 dist\dev\mp-weixin 运行。
- 运行生产环境同理
npm run build:mp-weixin
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）