weex安裝與配置——搭配weex-toolkit使用Weex Ui

Weex · 發表 2018-12-16 22:37:07

摘要：安裝前的準備安裝node.js，在node官網下載安裝即可： http://nodejs.cn/download/ 開啟cmd輸入node -v和npm -v顯示版本號即是安裝成功 node 安裝weex-toolkit腳手架 ...

安裝前的準備

安裝node.js，在node官網下載安裝即可： ofollow,noindex">http://nodejs.cn/download/

開啟cmd輸入node -v和npm -v顯示版本號即是安裝成功

node

安裝weex-toolkit腳手架

在cmd中用命令列安裝，輸入npm install -g weex-toolkit@latest 安裝weex-toolkit腳手架最新版本
同理輸入weex -v檢查腳手架是否安裝成功

weex

建立專案

使用weex-toolkit腳手架建立一個新專案，開啟cmd，在命令列中輸入weex create your_project ，your_project換成你專案的名稱。

安裝後執行npm i命令，使其安裝相關的依賴

使用Weex Ui

在cmd中切換到你建立的目錄下，輸入命令npm i weex-ui@latest -S安裝Weex Ui，
然後在輸入命令npm i babel-plugin-component babel-preset-stage-0 -D ，安裝babel-preset-stage-0 和 babel-plugin-component 外掛，前者用於babel編譯，後者用於優化 weex-ui 包的元件引用。
同時修改.babelrc如下

{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages",
"style": false
}
]
]
}

修改.babelrc

測試專案

在cmd中切換到專案目錄下，再輸入命令npm start啟動該專案

測試專案
按照提示在瀏覽器中開啟http://192.168.1.6:8081，即可看到以下介面

開啟介面
紅色按鈕是我為了測試weex ui 是否能使用加的，可在以下介面中新增程式碼即可出現和我一樣的效果

<template>
<div>
<wxc-button text="Open Popup"
@wxcButtonClicked="buttonClicked">
</wxc-button>
<wxc-popup width="500"
pos="left"
:show="isShow"
@wxcPopupOverlayClicked="overlayClicked">
</wxc-popup>
</div>
</template>

<script>
import { WxcButton, WxcPopup } from 'weex-ui';
module.exports = {
components: { WxcButton, WxcPopup },
data: () => ({
isShow: false
}),
methods: {
buttonClicked () {
this.isShow = true;
},
overlayClicked () {
this.isShow = false;
}
}
};
</script>

測試weex ui