VUX Mobile UI Components Deployment Guide

Prerequisites

Runtime Requirements:
- Vue.js version 2.3.0 or higher (required for .sync modifier)
- Node.js version 7.6 or higher (for development)
- Webpack version 2.0 or higher
Development Tools:
- npm (comes with Node.js) or yarn
- vue-cli (for project scaffolding)

Installation

Install Vue CLI globally:
```
npm install vue-cli -g
```
Create a new project using the VUX template:
```
vue init airyland/vux2 projectPath
```
Replace projectPath with your desired project directory name.
Navigate to your project directory:
```
cd projectPath
```
Install dependencies:
```
npm install
# or if using yarn
yarn
```

Configuration

VUX doesn't require specific environment variables or API keys for basic usage. However, you may need to configure:

Webpack configuration for custom build settings
Theme customization by modifying the WeUI SCSS variables
Plugin configurations for specific components (like XHR interceptors)

For advanced configuration, refer to the VUX documentation.

Build & Run

Development

Start the development server with hot reload:

npm run dev
# or
yarn dev

The development server will typically run on http://localhost:8080 (check your terminal output for the exact URL).

Production

Build the application for production:

npm run build
# or
yarn build

This creates optimized assets in the dist folder ready for deployment.

Deployment

VUX applications can be deployed to any static hosting service. Recommended platforms include:

Vercel (formerly Zeit Now)
Netlify
GitHub Pages
Surge.sh
AWS S3 with static website hosting
Firebase Hosting

Example: Deploying to Netlify

Build your project:
```
npm run build
```
Connect your repository to Netlify
Set the build command to npm run build
Set the publish directory to dist
Deploy!

Example: Deploying to GitHub Pages

Add the following to your vue.config.js:

module.exports = {
  publicPath: '/your-repo-name/',
  outputDir: 'docs',
  assetsDir: 'static'
}

Build your project:
```
npm run build
```
Commit and push the docs folder to your repository
Enable GitHub Pages in your repository settings, pointing to the docs folder

Troubleshooting

Common Issues and Solutions

1. Vue version compatibility

Issue: "You are using the runtime-only build of Vue"
Solution: Ensure you're using Vue 2.3.0+ and configure your build tool to use the full build, not runtime-only

2. Component not found

Issue: "Module not found: Error: Can't resolve 'vux'"
Solution: Check that you've installed dependencies with npm install and that your import statements are correct

3. WeUI styles not loading

Issue: Components appear unstyled
Solution: Ensure you've imported the VUX CSS/SCSS files in your main entry point:
```
import 'vux/src/styles/index.less'
```

4. Hot reload not working

Issue: Changes don't reflect in the browser
Solution: Check your webpack-dev-server configuration and ensure no conflicting port is being used

5. Build fails with memory issues

Issue: "JavaScript heap out of memory"

Solution: Increase Node.js memory limit:

node --max_old_space_size=4096 node_modules/.bin/vue-cli-service build

6. Mobile viewport issues

Issue: Components don't display properly on mobile devices

Solution: Ensure you have the proper viewport meta tag in your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

For additional support, visit the VUX GitHub Issues page or the VUX documentation.

How to Deploy & Use airyland/vux