uni-app x是怎么开发的各位大佬？

在开发uni-app项目时，尤其是针对uni-app x（即uni-app的增强版，通常指的是使用Vite构建工具的版本），你可以利用Vue.js的语法和丰富的组件库来快速构建跨平台应用。以下是一个简单的uni-app x项目开发的代码案例，涵盖项目初始化、页面创建以及基础功能的实现。

1. 项目初始化

首先，确保你已经安装了HBuilderX或者通过命令行使用Vite来初始化一个uni-app项目。这里假设你已经安装好了Node.js和npm/yarn。

# 使用Vite创建uni-app项目（假设已经全局安装了@dcloudio/uni-preset-vite）
npm init vite@latest my-uni-app-x -- --template vue --preset @dcloudio/uni-preset-vite

# 进入项目目录
cd my-uni-app-x

# 安装依赖
npm install

2. 配置项目

在vite.config.ts中，你可以配置uni-app相关的选项，但大多数情况下，默认配置已经足够。确保package.json中的scripts包含dev、build等命令。

3. 创建页面

在src/pages目录下创建一个新的Vue组件文件，例如Home.vue：

<template>
  <view class="content">
    <text>{{ message }}</text>
    <button @click="handleClick">Click Me</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello, uni-app x!')

const handleClick = () => {
  message.value = 'Button Clicked!'
}
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20px;
}
</style>

4. 修改路由

在src/pages.json中配置页面路由，确保你的新页面被正确注册：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/home/home",
      "component": "pages/Home.vue",
      "style": {
        "navigationBarTitleText": "Home Page"
      }
    }
  ]
}

5. 运行项目

在项目根目录下运行以下命令启动开发服务器：

npm run dev

这将启动一个本地开发服务器，你可以在浏览器中访问应用并查看效果。

通过上述步骤，你已经创建了一个简单的uni-app x项目，并添加了一个基本的页面和功能。uni-app x结合了Vue.js的简洁语法和uni-app的跨平台能力，使得开发多端应用变得更加高效和便捷。