vux Documentation

File: README.md Copy Chapter

Sponsors Copy Chapter

Requirements Copy Chapter

• vue@^2.3.0(for .sync modifier)
• webpack@^2.0
• node@^7.6(development)

Docs Copy Chapter

• 中文文档
• English(working)

Quick Start Copy Chapter

vux2 template is directly modified from Vue official webpack template.

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

cd projectPath
npm install // or yarn
npm run dev // or yarn dev

Maintainers Copy Chapter

• airyland
• lichunqiang
• graysheeep
• unclay
• wg5945
• Sapphire2k

Vux is Inspired or Powered By: Copy Chapter

• Vue
• WeUI
• FrozenUI
• Ant Design
• Ant Design Mobile
• XScroll
• Ionic
• SUI Mobile
• PhotoSwipe
• WePayUI
• autosize(MIT)
• buefy

License Copy Chapter

MIT

File: docs/faq.md Copy Chapter

Uncaught SyntaxError: Unexpected token export Copy Chapter

[zh-CN]
引用Vux src组件源码的时候, js并没有被babel编译，因为默认webpack模板里的babel exclude了 node_modules。解决方法是为vux的代码添加一个babel loader:

{
  test: /vux.src.*?js$/,
  loader: 'babel'
}

或者直接使用 vuxjs/webpack模板
[/zh-CN]

File: docs/install.md Copy Chapter

[zh-CN]

Vux推荐从src/components里引入组件，因为体积小而且配合vux-loader可以最大效率工程化。

后面将逐渐不支持umd的形式，即不再构建dist目录的umd文件，新的一些feature将使用webpack loader 来支持。

Vux组件的样式是各组件独立，因为你只需要保证项目有reset样式或者直接从vux/src/styles/reset.less引入。

快速上手 Copy Chapter

使用Vue的vue-cli工具和Vux提供的vuxjs/webpack可以快速创建一个基于Vux的移动端项目。

vuxjs/webpack帮你做了以下几件事：

• 配置vue-loader
• 配置babel-loader以正确编译Vux的js源码
• 添加less less-loader以正确编译less源码
• 添加viewport meta
• 添加Fastclick移除移动端点击延迟
• 添加vue-router
• 引入Vux的reset.less样式
• 添加webpack plugin, 在构建后去除重复css代码

# install vue-cli
npm install vue-cli

# init a webpack project with vuxjs/template
vue init vuxjs/webpack my-project
cd my-project
# or cnpm install
npm install
npm run dev

vue-cli手动引入 Copy Chapter

如果使用Vue提供的webpack模板，请参照vuxjs/webpack模板按需要处理。
其中为Vux js源码添加babel-loader是必须要做的，否则会报错。

添加meta Copy Section

src/index.html

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

引入Fastclick Copy Section

// src/main.js
const FastClick = require('fastclick')
FastClick.attach(document.body)

安装添加less less-loader Copy Section

npm install less less-loader --save-dev

添加babel loader Copy Section

在build/webpack.base.conf.js里引入vux-loader

var vuxLoader = require('vux-loader')
var projectRoot = path.resolve(__dirname, '../')

添加loader

loaders:[
  vuxLoader.getBabelLoader(projectRoot)
]

引入reset.less Copy Section

<style lang="less">
@import '~vux/src/styles/reset';
</style>

使用Vux模块 Copy Section

import Group from 'vux/src/components/group'
import Cell from 'vux/src/components/cell'

export default {
  components: {
  	Group,
    Cell
  }
}

hard模式：不推荐的umd方式 Copy Chapter

可以列出88个理由来说明为什么不推荐umd方式，但是对于一些历史项目重构成.vue文件也不大现实。因此在前面的版本，Vux同样生成了每个组件的umd文件方便引入。

你需要的做的事情是:

• 引入dist/styles/reset.css 样式
• 引入Vue js
• 引入需要的组件js
• 注册组件
• 引入需要的组件css
• 上线前合并压缩这些组件js和css

不建议你做的是：

• 引入 dist/vux.css, 该样式是所有组件的样式，仅用于测试
• 在新项目还使用umd文件

[zh-CN]