VUX 是一个基于 Vue.js 的移动端 UI 组件库，专门为移动端应用开发设计，集成了丰富的组件和交互效果，帮助开发者快速构建高质量的移动端界面。

VUX 简介

  • 基于 Vue.js：与 Vue.js 框架深度集成，组件化开发便捷。
  • 移动端优化：适配各种手机屏幕，提供流畅的触摸体验。
  • 丰富组件：按钮、弹出层、列表、表单控件、导航、滑动组件等。
  • 主题定制：支持自定义主题，灵活改变样式。
  • 支持按需引入：减少包体积，提高性能。
  • 集成常用工具：如路由、状态管理等常用移动端功能的支持。

安装方式

npm install vux --save

或者

yarn add vux

快速使用示例

<template>
  <div>
    <x-button type="primary" @click="handleClick">点击我</x-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$vux.toast.show({
        text: '你点击了按钮',
        type: 'success'
      })
    }
  }
}
</script>

常用组件示例

  • Button（按钮）
  • Toast（轻提示）
  • Dialog（对话框）
  • Popup（弹出层）
  • Tab（标签页）
  • Scroller（滚动容器）
  • Swipe（滑动组件）

官网与文档

好的！我给你写一个用 Vue + VUX 的简单移动端示例项目结构和代码，演示如何快速用 VUX 组件构建一个带按钮和弹窗的页面。

VUX 简单移动端示例项目

1. 新建项目并安装依赖

# 创建一个 Vue 项目（用 Vue CLI 或你喜欢的方式）
vue create vux-demo

cd vux-demo

# 安装 vux
npm install vux --save

# 由于 VUX 对部分环境有依赖，可能需要安装 babel-plugin-component
npm install babel-plugin-component --save-dev

2. 配置 babel（babel.config.js 或 .babelrc）

添加插件按需引入 VUX 组件，示例：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'vux',
        style: true
      }
    ]
  ]
}

3. 主页面示例（src/App.vue）

<template>
  <div id="app" style="padding: 20px;">
    <x-button type="primary" @click="showDialog = true">
      显示弹窗
    </x-button>

    <x-dialog
      v-model="showDialog"
      title="提示"
      content="这是一个来自 VUX 的弹窗"
      @on-ok="handleOk"
      @on-cancel="handleCancel"
    ></x-dialog>

    <x-toast
      :show="showToast"
      text="操作成功！"
      type="success"
      @hide="showToast = false"
    ></x-toast>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      showToast: false
    }
  },
  methods: {
    handleOk() {
      this.showDialog = false
      this.showToast = true
    },
    handleCancel() {
      this.showDialog = false
    }
  }
}
</script>

<style>
body, #app {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f5f5f7;
}
</style>

4. 在 main.js 中引入 VUX 组件库（根据版本，有些需要单独注册）

import Vue from 'vue'
import App from './App.vue'

import { XButton, XDialog, XToast } from 'vux'

Vue.component('x-button', XButton)
Vue.component('x-dialog', XDialog)
Vue.component('x-toast', XToast)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

5. 运行项目

npm run serve

访问项目页面，用手机或浏览器模拟移动端，即可看到一个带按钮、弹窗、Toast 的简单界面。

好嘞！我帮你设计一个稍微完整点的基于 Vue + VUX 的移动端小项目结构，包含路由管理（Vue Router）、状态管理（Vuex），以及更多常用 VUX 组件示例，适合快速启动一个移动端项目。

基于 Vue + VUX 的移动端示例项目（含 Vue Router + Vuex）

一、项目初始化

vue create vux-mobile-demo
cd vux-mobile-demo

npm install vux vue-router vuex --save
npm install babel-plugin-component --save-dev

二、babel.config.js 配置（按需加载 VUX）

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'vux',
        style: true
      }
    ]
  ]
}

三、src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 按需导入 VUX 组件
import { XButton, XDialog, XToast, XTabbar, XTabbarItem, XInput, XCell, XHeader } from 'vux'

Vue.component('x-button', XButton)
Vue.component('x-dialog', XDialog)
Vue.component('x-toast', XToast)
Vue.component('x-tabbar', XTabbar)
Vue.component('x-tabbar-item', XTabbarItem)
Vue.component('x-input', XInput)
Vue.component('x-cell', XCell)
Vue.component('x-header', XHeader)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

四、src/router/index.js（路由配置）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Profile from '@/views/Profile.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

五、src/store/index.js（Vuex 状态管理示例）

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    username: '游客'
  },
  mutations: {
    setUsername(state, name) {
      state.username = name
    }
  },
  actions: {
    updateUsername({ commit }, name) {
      commit('setUsername', name)
    }
  }
})

六、src/views/Home.vue

<template>
  <div>
    <x-header title="首页"></x-header>
    <div style="padding: 15px;">
      <p>欢迎，{{ username }}！</p>

      <x-input v-model="inputName" placeholder="请输入用户名"></x-input>

      <x-button type="primary" block @click="updateName">更新用户名</x-button>

      <x-dialog
        v-model="showDialog"
        title="提示"
        content="用户名已更新"
        @on-ok="showDialog = false"
      ></x-dialog>

      <x-tabbar v-model="activeTab" @change="onTabChange">
        <x-tabbar-item to="/" icon="home" title="首页"></x-tabbar-item>
        <x-tabbar-item to="/profile" icon="person" title="个人"></x-tabbar-item>
      </x-tabbar>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      inputName: '',
      showDialog: false,
      activeTab: 0
    }
  },
  computed: {
    ...mapState(['username'])
  },
  methods: {
    ...mapActions(['updateUsername']),
    updateName() {
      if (this.inputName.trim()) {
        this.updateUsername(this.inputName.trim())
        this.showDialog = true
        this.inputName = ''
      }
    },
    onTabChange(index) {
      if (index === 1) {
        this.$router.push('/profile')
      } else {
        this.$router.push('/')
      }
    }
  }
}
</script>

七、src/views/Profile.vue

<template>
  <div>
    <x-header title="个人中心"></x-header>
    <div style="padding: 15px;">
      <p>当前用户名：{{ username }}</p>
      <x-button type="warn" @click="goHome">返回首页</x-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['username'])
  },
  methods: {
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

八、运行项目

npm run serve

然后手机或浏览器打开 http://localhost:8080（端口根据实际情况），即可看到一个简单的移动端演示：

  • 首页可以输入用户名并更新（Vuex 管理状态）
  • 有弹窗提示
  • 底部 Tabbar 可以切换首页和个人页
  • 个人页显示当前用户名并可以返回首页