当前位置:   article > 正文

如何创建uniapp项目

创建uniapp

uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。
一、视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。开始之前,开发者需先下载安装如下工具:HBuilderX。
创建uni-app:在点击工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N):选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。

二、除了HBuilderX可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。

1:环境安装
全局安装 vue-cli

npm install -g @vue/cli

2:使用Vue3/Vite版

创建以 javascript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板:https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip)
命令:npx degit dcloudio/uni-preset-vue#vite my-vue3-project

创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板:https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip)
命令:npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

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


***注意***
Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效)
HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node路径

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/557181
推荐阅读