安裝node.js，在node官網(wǎng)下載安裝即可：http://nodejs.cn/download/
打開cmd輸入node -v和npm -v顯示版本號(hào)即是安裝成功

node

安裝weex-toolkit腳手架

• 在cmd中用命令行安裝，輸入npm install -g weex-toolkit@latest 安裝weex-toolkit腳手架最新版本

• 同理輸入weex -v檢查腳手架是否安裝成功

  

  weex

創(chuàng)建項(xiàng)目

使用weex-toolkit腳手架創(chuàng)建一個(gè)新項(xiàng)目，打開cmd，在命令行中輸入weex create your_project ，your_project換成你項(xiàng)目的名稱。
安裝后執(zhí)行npm i命令，使其安裝相關(guān)的依賴

使用Weex Ui

• 在cmd中切換到你創(chuàng)建的目錄下，輸入命令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編譯，后者用于優(yōu)化 weex-ui 包的組件引用。

• 同時(shí)修改.babelrc如下

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

修改.babelrc

測(cè)試項(xiàng)目

• 在cmd中切換到項(xiàng)目目錄下，再輸入命令npm start啟動(dòng)該項(xiàng)目

  

  測(cè)試項(xiàng)目

• 按照提示在瀏覽器中打開http://192.168.1.6:8081，即可看到以下界面

  

  打開界面

• 紅色按鈕是我為了測(cè)試weex ui 是否能使用加的，可在以下界面中添加代碼即可出現(xiàn)和我一樣的效果

<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>

作者：原南站
鏈接：https://www.jianshu.com/p/78dcf1c3bdb5
來(lái)源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。