### Quick Start with VUX

Source: https://doc.vux.li/zh-CN/faq/does-vux-support-weex

A basic guide to getting started with VUX in a Vue.js project, demonstrating initial setup and usage.

```javascript
// main.js
import Vue from 'vue'
import App from './App.vue'
import { XButton } from 'vux'

Vue.component('x-button', XButton)

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

--------------------------------

### Install and Use VUX

Source: https://doc.vux.li/en/faq/is-vux-wechat-official-project

Provides instructions on how to install and quickly start using the VUX framework. It may include manual installation and configuration steps.

```bash
npm install vux --save
# or
yarn add vux
```

--------------------------------

### Quick Start VUX

Source: https://doc.vux.li/en/about/thanks

A basic example to get started with VUX, demonstrating its integration into a Vue project.

```javascript
import Vue from 'vue'
import App from './App.vue'
import { XButton } from 'vux'

Vue.component('x-button', XButton)

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

--------------------------------

### VUX Installation and Quick Start

Source: https://doc.vux.li/en

This section covers the installation process for VUX and provides a quick start guide to get you up and running. It emphasizes the necessity of using vux-loader for proper configuration.

```javascript
npm install vux --save

// Or using yarn:
yarn add vux
```

--------------------------------

### Quick Start with VUX

Source: https://doc.vux.li/en/faq/does-vux-support-weex

A basic example demonstrating how to quickly start using VUX components in a Vue.js application.

```javascript
import Vue from 'vue'
import App from './App.vue'
import { XButton } from 'vux'

Vue.component('x-button', XButton)

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

--------------------------------

### Install and Run VUX2 Project

Source: https://doc.vux.li/en/install/biolerplate

This snippet shows how to initialize a new VUX2 project using Vue CLI, install dependencies (preferably from a Taobao mirror for speed), and start the development server.

```bash
npm install vue-cli -g
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org
npm run dev
```

--------------------------------

### Install and Run VUX 2 Project

Source: https://doc.vux.li/zh-CN/install/biolerplate

This snippet shows how to initialize a new VUX 2 project using Vue CLI, install dependencies (using Taobao's npm mirror for faster downloads), and start the development server.

```bash
npm install vue-cli -g
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org
npm run dev
```

--------------------------------

### VUX Installation and Usage

Source: https://doc.vux.li/en/faq/why-cannot-i-use-vux-with-cdn

This section covers the installation and basic usage of VUX, a UI component library for Vue.js. It may include commands for installation and initial setup.

```bash
npm install vux --save
# or
yarn add vux
```

--------------------------------

### vux-loader Installation and Usage

Source: https://doc.vux.li/en/faq/why-cannot-i-use-vux-with-cdn

Guide to installing and using vux-loader, a tool for processing VUX components.

```bash
npm install vux-loader --save-dev
```

--------------------------------

### Build and Serve Local Documentation

Source: https://doc.vux.li/zh-CN/contribution/vux-development

Builds the VUX documentation locally and then serves it for viewing. This process involves building the documentation, navigating to the docs directory, installing dependencies, and starting a development server.

```bash
npm run doc:build // 构建文档
cd docs
yarn
npm run dev // 耗时较长
```

--------------------------------

### Manual Setup: Installing Less and Less Loader

Source: https://doc.vux.li/en/install/manual-usage

This command installs the necessary `less` and `less-loader` packages, which are required for compiling VUX's Less stylesheets.

```Shell
npm install less less-loader --save-dev
```

--------------------------------

### Manual Setup: Installing Yaml Loader

Source: https://doc.vux.li/en/install/manual-usage

This command installs `yaml-loader`, which is needed for reading language files used in VUX.

```Shell
npm install yaml-loader --save-dev
```

--------------------------------

### Install VUX

Source: https://doc.vux.li/en/about/thanks

Instructions on how to install VUX, likely using a package manager like npm or yarn.

```bash
npm install vux --save
yarn add vux
```

--------------------------------

### Manual Setup: Integrating Vue Router

Source: https://doc.vux.li/en/install/manual-usage

This snippet shows how to install and use `vue-router` if your project requires client-side routing.

```JavaScript
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```

--------------------------------

### Install VUX

Source: https://doc.vux.li/en/faq/does-vux-support-weex

Instructions on how to install VUX, likely using a package manager like npm or yarn.

```bash
npm install vux --save
yarn add vux
```

--------------------------------

### Install VUX

Source: https://doc.vux.li/zh-CN/faq/does-vux-support-weex

Instructions on how to install VUX, likely using a package manager like npm or yarn.

```bash
npm install vux --save
yarn add vux
```

--------------------------------

### Install VUX from GitHub

Source: https://doc.vux.li/en/install/npm

Installs VUX directly from its GitHub repository, specifically from the 'v2' branch.

```bash
npm install git://github.com/airyland/vux.git#v2
```

--------------------------------

### Install and Use vux-loader

Source: https://doc.vux.li/zh-CN/about/thanks

Instructions on how to install and use vux-loader, a tool designed to work with VUX. It also lists available plugins for vux-loader.

```bash
npm install vux-loader --save-dev
```

--------------------------------

### Install and Use vux-loader

Source: https://doc.vux.li/zh-CN

Instructions on how to install and use `vux-loader`, a tool that works with VUX for efficient development. It ensures components are used on demand, optimizing the final build size.

```bash
npm install vux-loader --save-dev
```

--------------------------------

### Install vux-loader

Source: https://doc.vux.li/en/vux-loader/install

Installs vux-loader as a development dependency using npm.

```bash
npm install vux-loader --save-dev

```

--------------------------------

### Install VUX from GitHub

Source: https://doc.vux.li/zh-CN/install/npm

Installs the VUX package directly from its GitHub repository, specifying the 'v2' branch for the latest development version.

```bash
npm install git://github.com/airyland/vux.git#v2
```

--------------------------------

### Install VUX with npm

Source: https://doc.vux.li/en/install/npm

Installs the VUX package using npm. This is the standard method for adding VUX to your project.

```bash
npm install vux --save
```

--------------------------------

### VUX Manual Installation and Configuration

Source: https://doc.vux.li/en/faq/why-cannot-i-use-vux-with-cdn

Details on how to manually install and configure VUX, potentially involving specific build tool configurations or dependency management.

```bash
# Example of manual configuration steps (conceptual)
# Add VUX to your build process
# Configure webpack or other bundlers
```

--------------------------------

### Install vux-loader

Source: https://doc.vux.li/zh-CN/vux-loader/install

Installs the vux-loader package as a development dependency using npm.

```bash
npm install vux-loader --save-dev

```

--------------------------------

### Install PhantomJS Prebuilt

Source: https://doc.vux.li/zh-CN/contribution/vux-development

Installs the phantomjs-prebuilt package globally using cnpm. This is a prerequisite for running VUX source code locally, especially if there are issues downloading phantomjs.

```bash
cnpm install -g phantomjs-prebuilt
```

--------------------------------

### Install VUX with npm

Source: https://doc.vux.li/zh-CN/install/npm

Installs or updates the VUX package using npm. This is the standard method for adding VUX to your project.

```bash
npm install vux --save
```

--------------------------------

### Install vue-cli Globally

Source: https://doc.vux.li/zh-CN/about/before-using-vux

Installs the vue-cli tool globally using npm. This tool is used for quickly creating Vue.js projects.

```bash
npm install vue-cli -g
```

--------------------------------

### Install vue-cli Globally

Source: https://doc.vux.li/en/about/before-using-vux

Installs the vue-cli tool globally using npm. This tool is used for quickly creating Vue.js projects from templates.

```bash
npm install vue-cli -g
```

--------------------------------

### Install and Run VUX Locally

Source: https://doc.vux.li/en/contribution/vux-development

Instructions for setting up and running the VUX project locally. It requires Node.js version 7.6.0 or higher and uses Yarn for dependency management.

```bash
yarn // 使用 yarn.lock 保证依赖版本一致
yarn dev
```

--------------------------------

### Manual Countdown Example (Vue.js)

Source: https://doc.vux.li/zh-CN/components/countdown

An example of using the Countdown component in manual mode, controlled by a switch. The countdown starts when the switch is toggled on and can be reset.

```html
<template>
  <div>
    <group :title=" $t('Manually') ">
      <x-switch :title=" $t('Start') " v-model="start"></x-switch>
      <cell title="15s">
        <countdown v-model="time" :start="start" @on-finish="finish"></countdown>
      </cell>
    </group>
  </div>
</template>
```

```javascript
import { Countdown, Group, Cell, XSwitch } from 'vux'

export default {
  components: {
    Countdown,
    Cell,
    Group,
    XSwitch
  },
  data () {
    return {
      time: 15,
      value: '',
      start: false
    }
  },
  methods: {
    finish (index) {
      this.start = false
      this.time = 20
    }
  }
}
```

--------------------------------

### Countdown Component - Manual Example

Source: https://doc.vux.li/en/components/countdown

An example demonstrating the manual control of the Countdown component. A switch is used to start and stop the countdown, and the 'on-finish' event is handled to reset the countdown and update a value.

```vue
<template>
  <div>
    <group :title=" $t('Manually') ">
      <x-switch :title=" $t('Start') " v-model="start"></x-switch>
      <cell title="15s">
        <countdown v-model="time" :start="start" @on-finish="finish"></countdown>
      </cell>
    </group>
  </div>
</template>

<script>
import { Countdown, Group, Cell, XSwitch } from 'vux'

export default {
  components: {
    Countdown,
    Cell,
    Group,
    XSwitch
  },
  data () {
    return {
      time: 15,
      value: '',
      start: false
    }
  },
  methods: {
    finish (index) {
      this.start = false
      this.time = 20
    }
  }
}
</script>
```

--------------------------------

### Countdown Component - Automatic Example

Source: https://doc.vux.li/en/components/countdown

An example of using the Countdown component for an automatic countdown. The countdown starts immediately and triggers an 'on-finish' event when completed. The component's visibility is controlled by a data property.

```vue
<template>
  <div>
    <group :title=" $t('Automatic countdown') ">
      <cell title="15s" v-model="value">
        <countdown v-model="time" @on-finish="finish" v-show="show"></countdown>
      </cell>
    </group>
  </div>
</template>

<script>
import { Countdown, Group, Cell } from 'vux'

export default {
  components: {
    Countdown,
    Cell,
    Group
  },
  data () {
    return {
      show: true,
      time: 15,
      value: ''
    }
  },
  methods: {
    finish (index) {
      this.show = false
      this.value = 'completed'
      console.log('current index', index)
    }
  }
}
</script>
```

--------------------------------

### VUX Cookie Toolkit

Source: https://doc.vux.li/en/faq/does-vux-support-weex

Example of using the cookie utility functions to set, get, and remove cookies.

```javascript
import { cookie } from 'vux'

cookie.set('mycookie', 'myvalue', 1000) // Set cookie with expiration in milliseconds
const value = cookie.get('mycookie')
console.log(value) // "myvalue"
cookie.remove('mycookie')
```

--------------------------------

### Build and View Local Documentation

Source: https://doc.vux.li/en/contribution/vux-development

Steps to build and serve the VUX documentation locally. This involves building the documentation, installing dependencies in the docs directory, and running a development server.

```bash
npm run doc:build // 构建文档
cd docs
yarn
npm run dev // 耗时较长
```

--------------------------------

### VUX Datetime Range Component

Source: https://doc.vux.li/zh-CN/faq/does-vux-support-weex

Example of using the `DatetimeRange` component for selecting a start and end date/time in VUX.

```html
<template>
  <datetime-range title="Select Range" v-model="selectedRange"></datetime-range>
</template>

<script>
import { DatetimeRange } from 'vux'

export default {
  components: {
    DatetimeRange
  },
  data () {
    return {
      selectedRange: ['2023-01-01 00:00', '2023-12-31 23:59']
    }
  }
}
</script>
```

--------------------------------

### VUX XAddress Component (Raw Data)

Source: https://doc.vux.li/zh-CN/faq/does-vux-support-weex

Example of using the `XAddress` component with the `raw` prop to get the selected address values directly.

```html
<template>
  <x-address title="Address" v-model="value" raw @on-shadow-change="onShadowChange"></x-address>
</template>

<script>
import { XAddress } from 'vux'

export default {
  components: {
    XAddress
  },
  data () {
    return {
      value: []
    }
  },
  methods: {
    onShadowChange (value) {
      console.log('Raw address value:', value)
    }
  }
}
</script>
```

--------------------------------

### VUX Server-Side Rendering with Nuxt.js

Source: https://doc.vux.li/en/faq/vux-server-render-support

This snippet demonstrates how to integrate VUX with Nuxt.js for server-side rendering. It points to an example repository for detailed setup and usage.

```markdown
VUX 服务端渲染
目前支持 `NUXT` 渲染，可以参考例子：https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vux。
```

--------------------------------

### Vux Custom Chart Rendering Logic

Source: https://doc.vux.li/zh-CN/components/v-chart

This example demonstrates how to implement custom rendering logic for Vux's VChart component using the `prevent-render` prop and the `@on-render` event. It creates a polar chart with a custom arc and text guide.

```javascript
import { VChart } from 'vux'

export default {
  components: {
    VChart
  },
  methods: {
    renderChart ({ chart }) {
      const data = [ { x: '1', y: 85 } ]
      chart.source(data, {
        y: {
          max: 100,
          min: 0
        }
      })
      chart.axis(false)
      chart.tooltip(false)
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.8,
        radius: 0.85
      })
      chart.guide().arc({
        start: [ 0, 0 ],
        end: [ 1, 99.98 ],
        top: false,
        style: {
          lineWidth: 20,
          stroke: '#ccc'
        }
      })
      chart.guide().text({
        position: [ '50%', '50%' ],
        content: '85%',
        style: {
          fontSize: 24,
          fill: '#1890FF'
        }
      })
      chart.interval()
        .position('x*y')
        .size(20)
        .animate({
          appear: {
            duration: 1200,
            easing: 'cubicIn'
          }
        })
      chart.render()
    }
  }
}
```

--------------------------------

### Install VUX Loading Component (Plugin Usage)

Source: https://doc.vux.li/zh-CN/components/loading

Illustrates how to use the VUX Loading component as a Vue plugin for easier access.

```javascript
import { LoadingPlugin } from 'vux'
Vue.use(LoadingPlugin)

// Or for UMD builds:
// import vuxLoadingPlugin from 'path/to/vux-loading.umd.js'
// Vue.use(vuxLoadingPlugin)
```

--------------------------------

### Build VUX Components with Webpack

Source: https://doc.vux.li/zh-CN/install/umd

Instructions on how to build VUX components using Webpack. This includes cloning the repository, installing dependencies, and running the build command. It also shows how to customize the locale and namespace during the build process.

```bash
git clone https://github.com/airyland/vux.git --depth=1
cd vux
npm install
npm run build-components
```

```bash
npm run build-components -- --locale='en' --namespace='X'
```

--------------------------------

### Run VUX Development Server

Source: https://doc.vux.li/zh-CN/contribution/vux-development

Starts the VUX development server using Yarn. It ensures dependency version consistency and provides options to run specific components for faster builds.

```bash
yarn # 使用 yarn.lock 保证依赖版本一致
yarn dev # 或者 npm run dev

yarn dev -- --env.include datetime,alert # 只运行部分组件，耗时短
```

--------------------------------

### Install VUX with yarn

Source: https://doc.vux.li/en/install/npm

Installs the VUX package using yarn. An alternative package manager to npm.

```bash
yarn add vux // 安装
yarn upgrade vux // 更新
```

--------------------------------

### vux-loader vux-ui import example (0.x and 2.x)

Source: https://doc.vux.li/en/vux-loader/plugins

Demonstrates how the vux-ui plugin simplifies component imports in VUX projects. It shows the transition from explicit path imports in v0.x to direct named imports in v2.x.

```javascript
// 0.x
import Group from 'vux/src/components/group'
import Cell from 'vux/src/components/cell'

// 2.x
import { Group, Cell } from 'vux'

```

--------------------------------

### VUX Step Component

Source: https://doc.vux.li/en/about/thanks

Example of using the Step component from VUX for displaying progress steps.

```html
<step>
  <step-item selected>Step 1</step-item>
  <step-item>Step 2</step-item>
  <step-item>Step 3</step-item>
</step>
```

--------------------------------

### Install VUX Loading Component (Global Registration)

Source: https://doc.vux.li/zh-CN/components/loading

Shows how to globally register the VUX Loading component in the main Vue instance.

```javascript
// In your entry file (e.g., main.js)
import Vue from 'vue'
import { Loading } from 'vux'

Vue.component('loading', Loading)
```

--------------------------------

### Install VUX with yarn

Source: https://doc.vux.li/zh-CN/install/npm

Installs or updates the VUX package using yarn. Provides an alternative package management option.

```bash
yarn add vux // 安装
yarn upgrade vux // 更新
```

--------------------------------

### Install VChart

Source: https://doc.vux.li/zh-CN/components/v-chart

Instructions for installing the VChart component library, which is based on F2 from Ant Financial. It is designed for mobile-first visualization solutions.

```bash
npm install @vux/vchart --save
# or
yarn add @vux/vchart
```

--------------------------------

### Build VUX Styles

Source: https://doc.vux.li/zh-CN/install/umd

Command to build VUX CSS utility styles, including the 1px solution. The build files are located in `dist/styles/*.css`.

```bash
npm run build-styles
```

--------------------------------

### Build Components and Styles with npm script

Source: https://doc.vux.li/zh-CN/install/umd

A convenience npm script 'xbuild' that executes both 'build-components' and 'build-styles' to build VUX components and styles.

```bash
npm run xbuild
```

--------------------------------

### Install vue-cli Globally with Yarn

Source: https://doc.vux.li/zh-CN/about/before-using-vux

Installs the vue-cli tool globally using yarn. This is an alternative to using npm for package management.

```bash
yarn global add vue-cli
```

--------------------------------

### Install VUX Qrcode Globally

Source: https://doc.vux.li/zh-CN/components/qrcode

Shows how to register the VUX Qrcode component globally in the Vue application's entry file.

```javascript
import Vue from 'vue'
import { Qrcode } from 'vux'

Vue.component('qrcode', Qrcode)
```

--------------------------------

### Install vue-cli Globally with Yarn

Source: https://doc.vux.li/en/about/before-using-vux

Installs the vue-cli tool globally using yarn. This is an alternative to using npm for package management.

```bash
yarn global add vue-cli
```

--------------------------------

### Install VUX Step Component (Vue)

Source: https://doc.vux.li/zh-CN/components/step

Demonstrates how to locally register the Step and StepItem components in a Vue application. This is the recommended approach for most projects.

```Vue
import { Step, StepItem } from 'vux'

export default {
  components: {
    Step,
    StepItem
  }
}
```

--------------------------------

### Manual Setup: Configuring Babel Loader

Source: https://doc.vux.li/en/install/manual-usage

This snippet demonstrates how to configure `babel-loader` for VUX components, typically done via `vux-loader` plugins to ensure correct JavaScript compilation.

```JavaScript
plugins: [{
  name: 'vux-ui'
}]
```

--------------------------------

### Install AjaxPlugin in Vue.js

Source: https://doc.vux.li/en/development/vue-ajax

Demonstrates how to install the AjaxPlugin in the main Vue.js entry file. This plugin relies on axios for making HTTP requests.

```javascript
import { AjaxPlugin } from 'vux'
Vue.use(AjaxPlugin)
```

--------------------------------

### VUX Component Import Syntax with vux-loader

Source: https://doc.vux.li/zh-CN/install/upgrade-to-vux2

Demonstrates the simplified component import syntax in VUX 2.x when using `vux-loader`, allowing multiple components to be imported from a single path.

```javascript
import { Group, Cell } from 'vux'
```

--------------------------------

### Install XInput Locally

Source: https://doc.vux.li/zh-CN/components/x-input

Demonstrates how to register the XInput component locally within a Vue.js component. This is the recommended approach for most use cases.

```javascript
import { XInput } from 'vux'

export default {
  components: {
    XInput
  }
}
```

--------------------------------

### Manual Setup: Deduplicating CSS with vux-loader

Source: https://doc.vux.li/en/install/manual-usage

This configuration snippet for `vux-loader` enables the `duplicate-style` plugin to remove redundant CSS during the build process.

```JavaScript
plugins: [{
  name: 'duplicate-style'
}]
```

--------------------------------

### VUX Grid Usage Example

Source: https://doc.vux.li/en/components/grid

An example of how to use the VUX Grid component with GridItem elements, displaying icons and labels.

```html
<grid>
  <grid-item label="Grid" v-for="i in 9">
    <img slot="icon" src="../assets/grid_icon.png">
  </grid-item>
</grid>
```