搭配 weex-toolkit 使用 Weex Ui

搭配 weex-toolkit 使用 Weex Ui

安装前

安装前建议你的node版本是 >= 8.0, 推荐使用 n 来进行版本管理，同时建议 npm 版本 >= 5 1. node -v 2. v8.2.1 3. npm --version 4. 5.3.0Click to copy

确保 weex-toolkit 为新版本

npm install -g weex-toolkit@latest

目前最新版本为： weex -v

  1.    v1.1.0-beta.7
    2.  - weexpack : v0.4.7-beta.26
    3.  - weex-builder : v0.2.13-beta.4
    4.  - weex-devtool : v0.3.2-beta.11
    5.  - weex-previewer : v1.3.13-beta.13
    6.  - toolkit-repair : v0.0.5Click to copy

使用 weex-toolkit 创建一个项目

weex create your_project

同时安装相关依赖 npm i

在项目中使用 Weex Ui

安装 weex-ui

npm i weex-ui@latest -S

安装babel-preset-stage-0 和 babel-plugin-component 插件，前者用于babel编译，后者用于优化 weex-ui 包的组件引用 npm i babel-plugin-component babel-preset-stage-0 -D

同时修改.babelrc如下 1. { 2. "presets": ["es2015", "stage-0"], 3. "plugins": [ 4. [ 5. "component", 6. { 7. "libraryName": "weex-ui", 8. "libDir": "packages", 9. "style": false 10. } 11. ] 12. ] 13. }Click to copy

玩一玩 Weex Ui

修改 src/index.vue 进行测试 1. 13. 14. Click to copy

检测是否可以正常运行

启动一个web服务器

npm run serve

可以看到如下：测试下 weex 编译单文件 weex src/index.vue

测试下 Android 编译和打包 weex platform add androidweex run android

测试下 iOS 编译和打包 weex platform add iosweex run ios