从零搭建uniapp项目

已于 2025-08-07 15:38:44 修改
阅读量1.4k 收藏 14
点赞数 9
CC 4.0 BY-SA版权
分类专栏： 项目笔记 文章标签： uni-app 前端 vue.js
于 2025-06-06 03:35:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hacker_51/article/details/148382322

目录

创建uni-app项目

基础架构

安装 uni-ui 组件库

安装sass依赖

easycom配置组件自动导入

配置view等标签高亮声明

配置uni-ui组件类型声明

解决 标签 错误

关于tsconfig.json中提示报错

关于非原生标签错误（看运气）

安装 uview-plus 组件库

​编辑

Pinia 配置

pinia 依赖安装

测试

pinia 持久化配置

请求配置

添加拦截器

添加封装请求函数

添加响应拦截

创建uni-app项目

npx degit dcloudio/uni-preset-vue#vite-ts new-project-name

new-project-name：这里更改一下为自己的项目名称

基础架构

安装 uni-ui 组件库

官网：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
uniapp入门超详细教程：如何从零开始搭建项目
weixin_51609337的博客
07-19 2万+
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。本次章节也是博主从零开始搭建uniapp项目，在此过程进行记录，帮助后续查询同时为读者提供讲解，如有异议，欢迎留言。uni-app官网。
Uniapp商城项目【详细笔记文档】
@MIKE小助手
06-07 1万+
持续更新中…1.1 通过hbuilderx编辑器创建一个默认的uni-app项目（如图1——图2） 1.2 创建目录结构（如图：3） 1.2.1 在common目录中创建文件：common.css 注：common.css为全局css样式文件，其内容目前有： 1.2.2 在common目录中创建文件：uni.css。 注：uni.css为uni-app演示站文件，可理解为官方定义好的css默认样式。 1.2.3 在common目录中创建文件：iconfont.css。 注：iconfont.css是引
uniapp项目创建
qq_45796592的博客
02-18 1291
uniapp配置
uniapp学习【项目创建+项目结构解析】
最新发布
m0_71207979的博客
10-11 553
打开 HBuilderX，点击 “文件> 新建 > 项目”。选择 “Uniapp 项目”，填写以下信息：目录：选择本地文件夹（建议新建一个专门的开发文件夹，避免路径含中文）。模板：选择 “默认模板（Vue3）”（务必选 Vue3，否则后续无法使用 Vue3 语法）。勾选 “启用 TypeScript”（可选，小白建议先不勾，用 JavaScript 更易上手）。勾选 “创建 git 仓库”（可选，用于版本管理）。点击 “创建”，项目初始化完成（首次创建会自动下载依赖，需等待 1-2 分钟）。
uniapp开发小程序入门之创建uni-app项目
wwwbaidusss的博客
06-06 650
不受工具的约束，命令行即可创建项目可以使用开发者自己喜欢的开发工具即可开发。uni-create-view可以快速新建uni-app页面。1、安装uni-app插件（快速创建页面、代码提示）创建成功之后可以使用vscode打开该项目。插件设置中可以设置是否同时创建同名父文件夹。并且可以同时在pages.json设置路由。uni-helper代码提示工具包。
uniapp处理tsconfig.json报错
grand_brol的博客
11-29 3984
报错内容 ‘’在配置文件“c:/Users/kza/Desktop/uuiapp/my-project/tsconfig.json”中找不到任何输入。指定的 “include” 路径为“["**/*"]”，“exclude” 路径为“[]”。 解决方式 1、根目录新建一个ts文件 2、tsconfig添加如下代码 { "compilerOptions": { "types": [ "@dcloudio/types", "miniprogram-api-typings",
2023年最新最全uniapp入门学习，零基础入门uniapp到实战项目，unicloud数据后台快速打造uniapp小程序项目
热门推荐
编程小石头
11-03 3万+
零基础入门uniapp的开发
vite + vue3 + uniapp 项目从零搭建
qq_33365152的博客
07-18 2491
vite + vue3 + uniapp 项目从零搭建、uniapp、微信小程序
用Vue CLI创建uniapp项目
weixin_45416189的博客
03-03 7983
用Vue CLI创建uniapp 用Vue CLI创建uni-app，摆脱HBuilder，npm命令行运行及发布 除了 HBuilderX 可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。 如果是老的项目，也可以通过下方步骤，创建一个 uni-app 选择默认模板，然后将项目原封不动的复制到新项目的 ./src 目录。 执行 npm run serve / npm run build 就可以运行和打包了。 1. 环境安装 全局安装vue-cli npm ins
从零开始：UniApp入门指南与实战教程
lyc2022064288的博客
04-18 3432
UniApp是一个基于Vue.js的跨平台应用开发框架，它结合了Vue.js的开发模式和一些特定平台的能力，使开发者可以使用Vue.js来开发多端应用，包括微信小程序、App、H5等。发布到应用商店或Web服务器：根据目标平台的要求，将打包后的应用发布到相应的应用商店（如App Store、华为应用市场、小米应用商店等）或Web服务器上，供用户下载和使用。：UniApp基于Vue.js框架，拥有丰富的开发工具和生态系统，开发者可以快速上手，并且可以借助Vue.js的组件化开发思想，提高开发效率。
uni-app 从0 到 1 制作一个项目，收藏等于学会
前端人的博客
08-16 6636
uni-app 是使用 vue.js 开发的所有前端应用框架，开发者编写的一套代码，可以发布到 ios、android、web ，以及各种小程序平台。
uniApp项目创建
m0_67388537的博客
07-15 3420
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。
手把手带你从0到1创建一个uniapp项目，包学包会。
qq_66180056的博客
05-19 5773
uniapp官方文档uni-app的基本使用基础部分：+ 环境搭建+ 页面外观配置+ 数据绑定+ uni-app的生命周期+ 组件的使用+ uni-app中样式学习+ 在uni-app中使用字体图标和开启scss+ 条件注释跨端兼容+ uni中的事件+ 导航跳转+ 组件创建和通讯，及组件的生命周期+ uni-app中使用uni-ui库项目：购物项目##### uni-app介绍 [官方网页](https://uniapp.dcloud.io/resource)
uni-app开发小程序：项目架构以及经验分享
Cipher_Y的博客
07-25 3932
2022年的时候，公司为了快速完成产品并上线，所以选用微信小程序为载体；由于后期还是打算开发App；虽然公司有ios和Android，但是如果能一套代码打包多端，一定程度上可以解决成本；前端技术栈也是vue，在考察选择了uni-app。后来多个小程序项目都采用了uni-app开发，积累了一定的经验以及封装了较多业务组件，这里就分享一下uni-app项目的整体架构、常用方法封装以及注意事项。全文代码都会放到github，先赞后看，年入百万！
uni-app的基本搭建使用详解
博客
10-02 3545
本次带大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置，内容侧重于动手操作，需要理解的部分较少，操作过程中遇到错误后，可以从头重新进行操作，直到环境正常运行。在创建的项目中可以看到 Vue 的单文件组件，即 uni-app 创建的项目本质上就是 Vue 的项目，代码逻辑的细节我暂时先不去分析，先来看看 uni-app 的项目是如何启动的。H5 端运行有两种方式，一种是运行到浏览器，另一种是运行到内置浏览器，当选择内置浏览器时会提示安装【内置浏览器】插件。
小程序-uni-app：uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode
snow的博客
06-08 2万+
uniapp微信小程序开发全记录
uni-app项目
admin12345671的博客
07-06 2184
一、 1.pages.json { "pages": [ { "path": "pages/index/index" }, { "path":"pages/news/news", "style":{ } }, { "path": "pages/cart/cart" }, { "path": "pages/member/member" } ], "globalStyle": { "navigationBarText
记录一次完整的uniapp项目开发
m0_65720832的博客
06-19 2579
由于uView使用easycom模式，让您无需引入组件即可直接使用，但是此功能需要HbuilderX2.5.5及以。easycom打包的时候是按需引入的，您可以放心引入uView的。注意：uview依赖scss，如果项目是hbuilder创建的应该都已经安装了scss。整个组件库，发布打包时会自动剔除您没有使用的组件(注意：调试时仍然是全部引入的)1）去uniapp的插件市场中搜索uview，选择2.0，选择第一个的绿色按钮。选择需要引入的项目，安装好后出现了一个新的uni_modules文件夹。
uniApp：环境搭建及配置
孤安先生的博客，作者主站正在重构中，敬请期待！
07-02 7269
项目结构说明pages 目录所有的页面的存放目录static 目录静态资源目录unpackage 目录打包文件，存放各个平台的打包文件App.vue项目根组件，页面的入口文件main.js项目入口文件，主要作用是初始化 vue 实例并使用需要的插件配置打包的文件，指定应用的名称、图标、权限等pages.json设置项目页面的存放路径和窗口外观uni.scssuni-app 内置常用的变量页面文件遵循Vue 单文件组件（SFC）规范。组件标签靠近小程序规范，详见。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值