npm i weex-amui -S
<template>
<div>
<am-button
@click="handleClick"
text="确定"
type="primary"/>
</div>
</template>
<script>
import { AmButton } from 'weex-amui';
export default {
components: { AmButton },
methods: {
handleClick () {
// enter your code
}
}
};
</script>
- 安装
less-loader
以正确编译less源码
npm i less less-loader -D
- 安装 babel-plugin-component 来只引入需要的组件打包,同时如果没有安装
babel-preset-stage-0
,也需要一并安装。eros用户跳过这一步,点这里看
npm i babel-preset-stage-0 babel-plugin-component -D
// 增加一个plugins的配置到 .babelrc 中
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-amui",
"libDir": "packages",
"style": false
}
// 如果要和 weex-ui 一起用,配置加上下面这个
,{
"libraryName": "weex-ui",
"libDir": "packages",
"style": false
}
]
]
}
- 如果你使用了
weex-vue-render@1.x
版本(现在使用weex-toolkit
创建的项目可选0.x
和1.x
),1.x版本依赖的weex-vue-precompiler
当前版本会把自定义组件的click
,change
等事件处理出错,需要安装一下另外一个修改的版本。
npm i https://github.com/HMingHe/weex-vue-precompiler.git -D
- 请修改
.babelrc
文件,如下:
{
...
"plugins": [
["import",[
{
"libraryName": "weex-amui",
"libraryDirectory": "packages",
"style": false
}
]
...
}
npm i
npm run start