uni-halo/.agents/bak-skills/uniappx-project-creator/examples/guide/quick-start.md

uni-app-x 快速开始

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

创建第一个项目

一句话创建（CLI）

# 官方脚手架（推荐）
npm create uni-app-x@latest my-uniappx

# 或使用官方模板
npx degit dcloudio/uni-preset-vue-x my-uniappx

使用 HBuilderX

1. 打开 HBuilderX（版本 3.93+）
2. 文件 → 新建 → 项目
3. 选择项目类型：uni-app x
4. 选择模板：默认模板或示例模板
5. 填写项目信息：
   • 项目名称：my-first-uniappx
   • 项目路径：选择保存位置
6. 点击创建

使用 CLI

# 创建项目
npx degit dcloudio/uni-preset-vue-x my-first-uniappx

# 进入项目目录
cd my-first-uniappx

# 安装依赖
npm install

# 运行到 H5
npm run dev:h5

# 运行到微信小程序
npm run dev:mp-weixin

项目结构

创建后的项目结构：

my-first-uniappx/
├── src/
│   ├── pages/
│   │   ├── index/
│   │   │   └── index.vue
│   │   └── ...
│   ├── components/
│   ├── static/
│   ├── App.vue
│   └── main.ts          # TypeScript 入口
├── manifest.json
├── pages.json
├── vite.config.ts
├── tsconfig.json
└── package.json

运行项目

H5 平台

npm run dev:h5

浏览器会自动打开 http://localhost:3000

微信小程序

npm run dev:mp-weixin

项目会编译到 dist/dev/mp-weixin，使用微信开发者工具打开该目录。

创建第一个页面（TypeScript + Composition API）

1. 在 src/pages 目录下创建页面：

src/pages/
└── hello/
    └── hello.vue

2. 创建页面文件 hello.vue：

<template>
  <view class="container">
    <text class="title">{{ title }}</text>
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const title = ref<string>('Hello uni-app-x!')

const handleClick = () => {
  uni.showToast({
    title: '按钮被点击了',
    icon: 'success'
  })
}

onLoad((options) => {
  console.log('页面加载', options)
})
</script>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}
.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}
</style>

3. 在 pages.json 中注册页面：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/hello/hello",
      "style": {
        "navigationBarTitleText": "Hello"
      }
    }
  ]
}

创建第一个组件（TypeScript）

1. 在 src/components 目录下创建组件：

src/components/
└── my-button/
    └── my-button.vue

2. 组件代码：

<template>
  <button class="my-button" @click="handleClick">
    {{ text }}
  </button>
</template>

<script setup lang="ts">
interface Props {
  text?: string
}

const props = withDefaults(defineProps<Props>(), {
  text: '按钮'
})

const emit = defineEmits<{
  (e: 'click'): void
}>()

const handleClick = () => {
  emit('click')
}
</script>

<style scoped>
.my-button {
  background-color: #007aff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
}
</style>

3. 在页面中使用：

<template>
  <view>
    <my-button text="点击我" @click="handleButtonClick"></my-button>
  </view>
</template>

<script setup lang="ts">
import MyButton from '@/components/my-button/my-button.vue'

const handleButtonClick = () => {
  console.log('按钮被点击')
}
</script>

与 uni-app 的区别

1. 技术栈

• uni-app：Vue 2/3 + JavaScript
• uni-app-x：Vue 3 + TypeScript + Vite

2. 开发体验

• 更好的 TypeScript 支持
• 更快的构建速度（Vite）
• 更好的代码提示

3. 性能

• 更小的包体积
• 更快的启动速度
• 更好的运行时性能

下一步

• 学习 uni-app-x 组件：参考 uniappx-project
• 学习 uni-app-x API：参考 uniappx-project
• 配置项目：参考 templates/project-templates.md