HBuilderX Vue项目实战指南｜从入门到精通

HBuilderX Vue项目默认使用Vue Router 4，但需注意与uni-app路由系统的兼容性。在src/router/index.js中配置：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/pages/home/index.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () =>import '@/pages/about/index.vue'
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

注意： 若项目需兼容小程序，建议在pages.json中同步配置页面路由，避免多端不一致。

推荐使用Pinia替代Vuex，其API更简洁、性能更优。在src/stores/index.js中：

import { createPinia } from 'pinia'
const pinia = createPinia()
export { pinia }

在main.js中挂载：

import { createApp } from 'vue'
import { pinia } from '@/stores'
const app = createApp(App)
app.use(pinia)
app.mount('#app')

创建用户状态模块：

// stores/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () =>({
    token: null,
    userInfo: {}
  }),
  actions: {
    setToken(token) {
      this.token = token
      localStorage.setItem('token', token)
    },
    async fetchUserInfo() {
      const res = await await fetch('/api/user/info', {
        headers: { Authorization: this.token }
      })
      this.userInfo = res.data
    }
  }
})

创建src/utils/request.js统一处理API调用：

import axios from 'axios'
import { useUserStore } from '@/stores/user'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 15000
})
// 请求拦截器
service.interceptors.request.use(
  config =>{
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = `Bearer ${userStore.token}`
    }
    return config
  },
  error =>{
    console.error('Request Error:', error)
    return Promise.reject(error)
  }
)
// 响应拦截器
service.interceptors.response.use(
  response =>{
    const data = response.data
    if (data.code === 401) {
      const userStore = useUserStore()
      userStore.setToken(null)
      window.location.href = '/login'
    }
    return data
  },
  error =>{
    console.error('Response Error:', error)
    return Promise.reject(error)
  }
)
export default service

使用示例：

import request from '@/utils/request'
export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get'
  })
}

HBuilderX Vue项目推荐遵循以下组件开发规范：

• 组件名使用PascalCase，文件名与组件名一致
• Props定义使用对象语法，指定类型与默认值
• 自定义事件使用camelCase命名
• 使用<script setup>语法糖简化代码

示例：用户卡片组件

<!-- src/components/UserCard.vue -->
<template>
  <div class="user-card">
    <img v-if="user.avatar" :src="user.avatar" alt="用户头像">
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
    <button @click="handleClick">查看详情</button>
  </div>
</template>
<script setup>
const props = defineProps({
  user: {
    type: Object,
    required: true,
    default: () {}
  }
})
const emit = defineEmits(['view-detail'])
const handleClick = () =>{
  emit('view-detail', props.user.id)
}
</script>
<style scoped>
.user-card {
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
}
</style>

在HBuilderX中点击“发行 → 网站（H5）”，生成dist目录。构建前需配置环境变量：

// .env.production
VUE_APP_BASE_API = 'https://api.prod.example.com'

构建命令（可选）：

npm run build:h5

方式一：上传至uniCloud

1. 在HBuilderX中点击“发行 → 云打包 → uniCloud Web应用”
2. 选择云空间，自动部署并生成访问域名
3. 支持HTTPS、CDN加速、HTTPS强制跳转

方式二：部署至Nginx

# nginx.conf
server {
  listen 80;
  server_name example.com;
  root /var/www/h5/dist;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

在HBuilderX中点击“发行 → 微信小程序”，生成小程序代码包。

发布步骤：

1. 打开微信开发者工具，导入生成的项目目录
2. 上传代码至微信后台
3. 提交审核并发布

注意事项：

• 确保app.json中配置合法域名
• 小程序主体需在微信开放平台备案
• HTTPS证书需由受信任CA签发