摘要：要想用好必須對基礎，體系，打包工具有較深的了解對，有了解。官方提供的腳手架不能指定入口文件，如果我們想要在項目中使用，沒有入口文件將會變得比較復雜。那么，我們應該如何使得當前項目具有入口文件呢答案是只能修改文件。

寫在前面的話：

注意！該文檔是2017年年底的文章，那個時候weex還有很多問題，現在weex已經全面更新，文檔也比較全。下面的講解可能不太適應新的weex框架，后面我會再立貼講解。謝謝各位關注。

weex官方文檔不完善，在整個實施過程中遇到過很多坑，中途幾次想放棄，總是有些不甘心。攻堅克難，總也是會有一些收獲，先將收獲進行分享也或是記錄，防止忘記。要想用好weex必須對es5/es6基礎，vue體系，打包工具webpack有較深的了解；對ios，android有了解。

官方提供的weex腳手架不能指定入口文件，如果我們想要在項目中使用vuex,vue-router，沒有入口文件將會變得比較復雜。那么該如何搭建具有入口文件的腳手架呢？首先，我們先把官方提供的腳手架使用一下，然后再其基礎上進行修改

一. 初始化weex項目

$ weex init helloweex

二. 安裝依賴包

$ cd helloweex
$ npm install
或者可以使用淘寶鏡像安裝
$ cnpm install

**注意！如果使用npm安裝依賴，建議先手動創建node_modules目錄再進行安裝，避免后期出現權限不足的問題**

三. 在瀏覽器中進行測試

注意！在瀏覽器中顯示成功并不意味著在本地就可以顯示成功！因為這是兩個不同的執行環境。
$ npm run serve

四. 此時會遇到第一個坑

原因：

https://www.npmjs.com/package/uglifyjs-webpack-plugin
   
解決方案：
1）安裝 uglifyjs-webpack-plugin
    $ cnpm i -D uglifyjs-webpack-plugin
2) 應用
    const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
    module.exports = {
      plugins: [
        new UglifyJsPlugin()
      ]
    }

3) 重新部署，不再報錯！

五. 模擬器上運行

如果之前步驟可以完成，只能說明當前代碼在瀏覽器上可以執行，能不能本地運行還需要再進行測試。要想本地測試必須安裝模擬器（ios或android），本文章不提供具體的安裝過程，如有需要，請自行查看其它文章。
本章以ios環境為例進行測試
依次執行如下命令
1) 安裝ios平臺
    $ weex platform add ios        

2) 安裝依賴
    $ cd platforms/ios
    $ pod install
    

3) 運行
    $ cd ../..
    $ weex run ios (次過程較慢，需等待一會)
4) 選擇運行環境后啟動模擬器

六. 編寫代碼

查看webpack.config.js得知會，該腳手架會根據src下vue文件產生一個對應的.js文件存放到demo目錄下，但是傳統的vue開發，我們都希望有個入口文件（main.js或者entry.js）,然后在該文件中導入其他模塊，進行頁面的總體配置等操作。

那么，我們應該如何使得當前項目具有入口文件呢？答案是只能修改webpack.config.js文件。

1）添加入口文件配置

2) 刪除多余配置信息
刪除getEntryFileContent函數
刪除walk函數
刪除walk() walk函數的調用

3) 在src目錄下添加主vue,App.vue
    

4) 在src目錄下添加入口文件entry.js，并且刪除temp目錄

5) 在瀏覽器中進行測試
    $ npm run serve

6) 在ios模擬器上進行測試
    $ weex run ios
    

    
7) 如果發現打包后的文件不叫index.js可以修改webpack.config.js

8）解決頁面無法覆蓋整個屏幕的問題
需要在原生代碼中進行簡單的修改