uni-app的Vue3+TS+Pinia+Axios+Router教程

Android

2022-11-24 09:54:25

跨平台开发的利器：探索 uni-app 和 Vue.js

在当今快节奏的科技领域，跨平台开发已成为开发人员的必备技能。uni-app，一种基于 Vue.js 的跨平台开发框架，让构建移动端 H5、小程序和 App 应用变得轻而易举。

1. uni-app 入门

要开始使用 uni-app，首先安装 uni-app CLI 工具。然后，通过 CLI 创建一个新的项目，并通过运行 npm run dev 来启动它。

2. Vue.js 基础

uni-app 构建在 Vue.js 框架之上，提供 Vue.js 的所有优势，例如：

组件化开发：将应用分解为可重用的组件，提高代码可维护性和开发效率。
响应式数据绑定：当数据发生变化时，视图会自动更新，简化状态管理。
生命周期钩子：在组件的不同生命周期阶段执行特定任务。

3. TS 实战

TypeScript 是一种流行的 JavaScript 超集，它可以为您的 uni-app 项目添加类型安全性。安装 TypeScript 后，您可以在项目中添加 TypeScript 支持，并在 .vue 文件中使用 TypeScript 语法。

// src/components/MyComponent.vue

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      message: 'Hello, world!'
    }
  }
})
</script>

4. Pinia 状态管理

Pinia 是一个轻量级的状态管理库，它可以简化 uni-app 中的状态管理。安装 Pinia 后，在项目中创建一个 store，并在组件中使用 Pinia 的 useStore 钩子访问 store。

// src/store/main.js

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

5. Axios 网络请求

Axios 是一个流行的 HTTP 客户端库，它可以轻松地在 uni-app 中进行网络请求。安装 Axios 后，创建 Axios 实例并将其用于异步加载数据。

// src/utils/request.js

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://example.com'
})

export default instance

6. Router 路由管理

Vue Router 是一款路由管理库，它可以管理 uni-app 中的页面导航。安装 Vue Router 后，创建路由配置并使用 router-link 和 router-view 组件在组件中管理路由。

// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/pages/Home.vue')
  },
  {
    path: '/about',
    component: () => import('@/pages/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router