如何创建开发uniapp微信小程序项目？详细步骤教程

1.创建uni-app

2种创建方法：

第一种方法：HBuilderX可视化界面

具体方法：

利用HbuilderX初始化项目

点击HbuilderX菜单栏文件>项目>新建 选择uni-app,填写项目名称，项目创建的目录

uni-app支持通过 可视化界面、两种方式快速创建项目。

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

HBuilderX：

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。

如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。

创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

运行uni-app

浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 选择自己想运行的环境即可：

发布：

也是按照自己的需求选择：

第二种方法：使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目

使用正式版（对应HBuilderX最新正式版） vue create -p dcloudio/uni-preset-vue my-project 使用alpha版（对应HBuilderX最新alpha版） vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project 使用Vue3/Vite版 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 下载模板） npx degit dcloudio/uni-preset-vue#vite my-vue3-project 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 下载模板） npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

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

自定义模板

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。

例子：我们这里使用正式版命令：

vue create -p dcloudio/uni-preset-vue my-project

具体步骤：

1.需要电脑提前全局安装vue-cli

环境安装

全局安装vue-cli

npm install -g @vue/cli@4

安装好了之后，继续下一步：

2.打开cmd选择好要安装的目录之后。执行以下命令：

vue create -p dcloudio/uni-preset-vue my-project

3.选择hello uni-app 项目模板

不同模板的区别：

安装好了之后，

4.进入到my-project目录

cd my-project

5.运行项目：

以下2个命令都行

npm run dev
npm run serve

6.查看项目的网页效果

点击网址，就可以查看我们创建的uniapp项目了！

7.打包、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

效果：

使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别

编译器的区别

cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，可以使用 管理编译器的版本，如 npx @dcloudio/uvm。 HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。 cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

开发工具的区别

注意：HBuilderX创建的项目，一样可以使用npm