用UView-Plus和Pinia开发Uniapp Vue3应用程序

前端

2022-11-18 23:22:45

使用UView-Plus和Pinia构建Uniapp Vue3待办事项应用程序

1. 安装Uniapp

踏上Uniapp之旅的第一步就是安装它。这是一款跨平台开发框架，让我们可以用JavaScript轻松构建iOS、Android和H5应用程序。前往Uniapp官网下载最新版本并安装。

2. 创建Uniapp项目

安装Uniapp后，让我们创建一个新项目。在Uniapp IDE中，点击“新建项目”，选择“Vue3”选项，输入项目名称和路径，然后点击“创建”。

3. 安装UView-Plus

现在，让我们引入UView-Plus。这是一个组件库，提供了一系列UI组件，帮助我们快速构建应用程序界面。通过以下命令安装：

npm install @uview/uview-ui

并在main.js文件中引入它：

import UView from '@uview/uview-ui'
Vue.use(UView)

4. 安装Pinia

Pinia是我们的状态管理神器，可以管理应用程序状态。通过以下命令安装：

npm install pinia

并在main.js文件中引入它：

import { createPinia } from 'pinia'
const pinia = createPinia()
Vue.use(pinia)

5. 创建待办事项应用程序

是时候创建我们的待办事项应用程序了。新建一个名为TodoList.vue的组件：

<template>
  <div>
    <u-list>
      <u-cell v-for="item in todos" :key="item.id">
        {{ item.title }}
        <u-icon name="close" @click="removeTodo(item.id)" />
      </u-cell>
    </u-list>
    <u-form @submit.native.prevent="addTodo">
      <u-input v-model="newTodoTitle" placeholder="添加新的待办事项" />
      <u-button type="submit">添加</u-button>
    </u-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useStore } from 'pinia'

export default {
  setup() {
    const todos = ref([])
    const newTodoTitle = ref('')

    const store = useStore()
    const { addTodo, removeTodo } = store

    return {
      todos,
      newTodoTitle,
      addTodo,
      removeTodo,
    }
  },
}
</script>