uni-app 从0 到 1 制作一个项目，收藏等于学会(uni-app实战教程)

uni-app 从0 到 1 制作一个项目，收藏等于学会

推荐整理分享uni-app 从0 到 1 制作一个项目，收藏等于学会(uni-app实战教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uni app ui,uni-app入门,uni-app实例教程,uni-app入门,uni-app入门教程,uni-app入门,uni-app入门教程,uni-app实战,内容如对您有帮助，希望把文章链接给更多的朋友！

uni-app 是使用 vue.js 开发的所有前端应用框架，开发者编写的一套代码，可以发布到 ios、android、web ，以及各种小程序平台。

一、创建uni-app

1、hBuilderX 可视化创建

最便捷的就是使用 hbuilder 可视化创建项目，在点击工具栏里的文件 -> 新建 -> 项目：

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

2、cli 脚手架创建 2.1、使用正式版

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

2.2、使用 alpha 版

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

2.3、使用 vue3/vite 版

创建 js 开发的项目

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

创建 typeScript 开发的xia

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project二、项目结构

以 uni-app + vue3 + vite + ts 项目为例，项目结构目录如图：

index.html 首页入口文件。package.json 项目配置文件。tsconfig.json typescript 配置文件。vite.config.ts vite 的配置文件。

src 存放开发资源文件，基本要做的事情都在这个目录内，里面又包含了几个目录文件：

pages 存放所有页面文件，我们创建的页面组件都放入该文件夹。static 存放静态资源的文件夹。App.vue 页面入口文件，所有页面都在 App.vue 下进行切换。env.d.ts 第三方模块的类型