uniapp入门项目+详细搭建教程，搭建uniapp项目流程手把手教学

## 前言 ### 🍊缘由 #### 博友有问，狗哥必答 前段时间，博友加本狗微信，询问**uniapp的学习方法**。本狗资历浅薄，没有专门学过uniapp，只能将自己日常开发**uniapp的基本流程和步骤**进行分享，希望可以略尽绵薄之力。**感谢**如下图所示的**博友朋友**的**询问支持**，大家的支持才是我进步的动力。  ******* ### 🎯主要目标 #### 实现4大重点 1. uniapp项目**搭建流程** 2. uniapp项目常用**组件引入方式** 3. uniapp项目**接口封装策略** 4. uniapp项目**常用配置整理** ****** ## 🎁快速链接 ### 公众号：JavaDog程序狗 **关注公众号，发送 【uniapp】，无任何套路即可获得**  ****** ### 🍯猜你喜欢 #### 文章推荐 [【项目实战】SpringBoot+vue+iview打造一个极简个人博客系统](https://mp.weixin.qq.com/s/fbpVBQVe-4nHdjt5PBdwSw) [【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目](https://mp.weixin.qq.com/s/g7AZOWLgW5vcCahyJDEPKA) [【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序](https://mp.weixin.qq.com/s/t_qwF_HvkdW-6TI3sYUHrA) [【模块分层】还不会SpringBoot项目模块分层？来这手把手教你！](https://mp.weixin.qq.com/s/fpkiNR2tj832a6VxZozwDg) [【ChatGPT】手摸手，带你玩转ChatGPT](https://mp.weixin.qq.com/s/9wEelbTN6kaChkCQHmgJMQ) [【ChatGPT】SpringBoot+uniapp+uview2对接OpenAI，带你开发玩转ChatGPT](https://mp.weixin.qq.com/s/b19J36Eo3-ba7bHbWzoZYQ) ****** ### 🍈猜你想问 #### 如何与狗哥联系进行探讨 关注公众号【**JavaDog程序狗**】，里面包含**狗哥联系方式**，**有问必答**  ## 正文 ### 🏀前置条件 #### 1.HBuilderX >[官方IDE下载地址](https://www.dcloud.io/hbuilderx.html) https://www.dcloud.io/hbuilderx.html #### 2.npm Node.js 包管理工具 > 安装Node等相关百度即可，简单易懂 ### 🍄开始 #### 1.打开工具 双击打开HBuilder X  ****** #### 2.创建新项目 - 点击HBuilder X工具左上角【文件】=》【新建】=》【项目】  - 按照项目业务起名，如聊天系统就叫**chat-uniapp**，博客系统就叫**blog-uniapp**，这个地方不强制，个人习惯，**本次实例以example-unipp**作为项目名，选择默认模板，示例以**vue2版本**做基础，点击【创建】  - 初始化项目结构如下  ****** #### 3.引入组件 - 本狗在uniapp项目中，常用UI库及常用工具引入，小项目基本够用，大家可**按需加载** | 插件 | 版本 | 用途 | | --- | ----- | ----- | | uview-ui| ^2.0.31 |多平台快速开发的UI框架 | | moment | ^2.29.4 |js工具库 | > [uView UI](https://www.uviewui.com/)，是全面兼容nvue的**uni-app生态框架**，其中还包含**API相关JS函数**，方便封装易用。  > [moment](http://momentjs.cn/)是**时间js工具库**，常用时间转化格式化等  - 项目根路径新建package.json，配置上述依赖组件 ```json { "dependencies": { "moment": "^2.29.4", "uview-ui": "^2.0.31" } } ```  - 项目根路径下拉取依赖 >右击项目根目录，点击【使用命令行窗口打开所在目录】，或者通过命令行进入项目路径都可  > npm i  > 查看成功拉取依赖  ****** #### 4.组件配置 - 配置uview 1. 在**App.vue**中引入uview的scss  2. 在**main.js**中引入uview ```js import uView from 'uview-ui' Vue.use(uView) ```  3. 将根路径下**uni.scss**中，将uview的theme.scss 覆盖uniapp默认内置样式 ```css /* uni.scss */ @import 'uview-ui/theme.scss'; ```  4. 在pages.json中加入easycom ```json "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, ```  5. 加入uview组件，在/pages/index/index.vue加入简单button组件 ```html <u-button type="primary" text="测试"></u-button> ```  6. 启动项目，测试是否引入成功 点击【运行】=》【运行到浏览器】=》【chrome】，打开显示button即为成功   ****** - 配置moment 1. 在**main.js**中引入moment ```js // 引入moment import moment from 'moment'; // 挂载到vue原型上，全局注册 Vue.prototype.$moment = moment; ```  2. /pages/index/index.vue中引入moment，调试组件 ```html <h3>{{$moment(new Date()).format('yyyy-MM-DD HH:mm:ss')}}</h3> ```  3. 查看页面是否引入moment成功  ****** #### 5.函数封装 - 环境变量 > 实际项目会分很多环境，如dev开发环境、local本地环境、prod生产环境等，针对不同环境，其中配置也有不同 在根路径下新建common/config文件包，在包中新建env.js ```js // prod-生产 dev-开发 local-本地 const env = "local" // contextPath路径 const contextPath = "example/v1" const prod = { baseUrl: `https://localhost:9001/${contextPath}`, // 线上环境' } const dev = { baseUrl: `http://localhost:7001/${contextPath}`, // 开发环境' } const local = { baseUrl: `http://localhost:8001/${contextPath}`, // 测试环境' } const config = { dev, prod, local, } export default config[env] ```  挂载vue原型，全局注册config ```js import config from '@/common/config/env.js' Vue.prototype.$config = config; ``` - Http请求 > 通常将项目中与后台交互中Http请求做封装 因本项目采用**uview**为UI组件库，内置很多API函数，直接摘取成熟框架中�