uni-app框架（项目创建）

1.学习说明

dcloud官方除uni-app外，还有新生的uni-app x（即下一代uni-app），如果是初学者或者刚入门同学，建议还是使用uni-app进行开发。

无论是vue还是uni，作为前端开发的一个框架学习方法是一致的，因此在开发学习的过程中需要注意目录结构、开发规范、生命周期、页面结构等重点，然后依次进行深入学习。

本文档以vue3、组合式api、ts进行开发学习。

2.框架介绍

官方文档：https://uniapp.dcloud.net.cn/
框架优势

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

3.项目创建

1.HBuilderX可视化创建（推荐）

下载开发工具

https://www.dcloud.io/hbuilderx.html

在点击工具栏里的文件->新建->项目（快捷键Ctrl+N）
选择uni-app
选择模板（建议使用默认模板）
选择vue版本（建议vue3）

2.vue-cli创建

全局安装 vue-cli

npm install -g @vue/cli

创建uni-app

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

4.Typescript 配置

创建文件并进行配置修改，在根目录创建tsconfig.json 文件，点击查看官方手册。

// tsconfig.json{  "compilerOptions": {    "target": "esnext",    "module": "esnext",    "strict": true,    "jsx": "preserve",    "moduleResolution": "node",    "esModuleInterop": true,    "sourceMap": true,    "skipLibCheck": true,    "importHelpers": true,    "allowSyntheticDefaultImports": true,    "useDefineForClassFields": true,    "resolveJsonModule": true,    "lib": [      "esnext",      "dom"    ],    "types": [      "@dcloudio/types"    ]  },  "exclude": [    "node_modules",    "unpackage",    "src/**/*.nvue"  ]}

5.UI组件安装

此处使用npm安装，其他安装方式查看官方安装手册，注意：安装完成后重新编译运行！！！

1.uni-ui

（1）安装 sass

npm i sass -D

（2）安装 sass-loader

npm i sass-loader@10.1.1 -D

（3）安装uni-ui

npm i @dcloudio/uni-ui

（4）配置easycom

 打开项目根目录下的pages.json 并添加 easycom 节点， 如下示例图，代码紧随其后。

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },
  
  // 其他内容
  pages:[
    // ...
  ]
}

2.uview-plus

（1）安装 sass（若已安装，可跳过）

npm i sass -D

（2）安装 sass-loader（若已安装，可跳过）

npm i sass-loader@10.1.1 -D

（3）安装uview-plus，依次安装命令如下：

npm install uview-plus
npm install dayjs
npm install clipboar

（4）引入uview-plus主JS库

在项目src目录中的main.js中，引入并使用uview-plus的JS库，注意这两行要放在const app = createSSRApp(App)之后。

// #ifdef VUE3
import { createSSRApp } from 'vue'
import uviewPlus from 'uview-plus'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

示例截图如：

（5）引入uview-plus的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件

/* ui.scss */
@import 'uview-plus/theme.scss';

（6）引入uview-plus基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性，截图及代码如下：

<style lang="scss">
  /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
  @import "uview-plus/index.scss";
</style>

（7）配置easycom组件模式

打开项目根目录下的pages.json 并添加 easycom 节点。因为上面安装uni-ui时已进行配置，因此此处仅需在custom种添加已下三行即可，代码及截图如下：

"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"

6.页面重构

删除旧文件

删除pages目录下的原有index.vue文件

创建新文件

在pages目录下新建index.vue文件，截图及完整示例代码如下（直接复制运行即可）：

<template>
  <view class="content u-flex-column">
    <uni-section title="定义数据" type="line">
      <view class="data"><text class="title">{{title}}</text></view>
    </uni-section>
    <uni-section title="uni-ui组件示例" type="line">
      <view class="data">
        <up-text color="#fff" text="uni-ui组件示例"></up-text>
        <uni-badge size="small" :text="100" absolute="rightBottom" type="primary">
          <button type="default">右下</button>
        </uni-badge>
      </view>
    </uni-section>
    <uni-section title="uview-plus组件示例" type="line">
      <view class="data u-btn">
        <up-text color="#fff" text="uview-plus组件示例"></up-text>
        <up-button type="primary" text="确定"></up-button>
        <up-button type="primary" :plain="true" text="镂空"></up-button>
      </view>
    </uni-section>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const title = ref('测试');
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    min-height: 50vh;

    .data {
      padding: 0 15rpx;
    }
  }
</style>