Uniapp Vue3 基础知识点附带实例

什么是Uniapp？

Uniapp是一个基于Vue.js的跨平台开发框架，能够快速地在多个平台（包括iOS、Android、H5、小程序等）上开发应用。Uniapp支持使用Vue的语法和开发方式，并且提供了一些特殊的API以适配不同的平台。

Vue3新特性

Vue3相比于Vue2有很多的改进和新特性，主要包括：

Composition API：Vue3引入了新的Composition API，可以将相关代码组织在一起，让代码更加容易理解和维护。
更好的TypeScript支持：Vue3对TypeScript有更好的支持，提供了更多的类型推断和类型检查。
性能优化：Vue3在性能方面有很大的改进，包括更高效的响应式系统、渲染优化和Diff算法的改进等。

示例：创建一个简单的Uniapp Vue3应用

第一步：安装Uniapp

使用npm或者yarn全局安装Uniapp命令行工具：

npm install -g @vue/cli
vue add @vue/cli-plugin-uni

第二步：创建Uniapp项目

使用Uniapp命令行工具创建一个新的Uniapp项目：

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

第三步：创建页面

在项目的src/pages目录下创建一个新的页面，比如Home：

<template>
  <view class="container">
    <text class="title">Hello Uniapp Vue3!</text>
  </view>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 24px;
  color: #333;
}
</style>

第四步：配置路由

在项目的src/router/routes.js文件中配置路由信息：

export default [
  {
    path: '/pages/home/index',
    name: 'home',
    component: () => import('@/pages/home/index.vue'),
  },
]

第五步：修改入口文件

在项目的src/main.js文件中引入Vue3并使用Uniapp的createApp()方法创建应用实例：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount()

第六步：运行项目

在项目根目录下运行以下命令启动项目：

npm run dev:mp-weixin

结语

Uniapp是一个非常方便和强大的跨平台开发框架，结合Vue3的新特性，可以更加高效地开发多平台应用。以上只是一个简单的Uniapp Vue3应用示例，更多功能和扩展请参考Uniapp官方文档。

本文来自极简博客，作者：星空下的梦，转载请注明原文链接：Uniapp Vue3 基础知识点附带实例