一、安装node.js
点击链接 http://nodejs.cn/download/ 选择你需要安装的版本（windows ，mac，linux 3种系统的版本），下载你需要的版本
点击安装包，下一步，下一步，安装完成即可。
执行查看node版本号
node -v
显示当前node版本号
deiMac:~ li$ node -v
v8.1.0
使用淘宝NPM源
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
二、安装webpack
//全局安装
$ cnpm install -g webpack
或者
//安装到你的项目目录
$ cd 你的工程目录
$ cnpm install --save-dev webpack
三、安装serve
//全局安装
$ cnpm install -g serve
或者
//安装到你的项目目录
$ cd 你的工程目录
$ cnpm install serve
四、安装weexpack
首先，全局安装 weex-pack 命令：
$ cnpm install -g weexpack
或者 在 clone 的 weexpack 根目录下执行
$ cnpm install
- 创建 weexpack 工程
$ weexpack create appName
使用WebStrom打开创建的工程目录如下
2.进入创建的工程目录，并且安装相关依赖
$ cd appName && cnpm install
安装完第三方依赖，工程目录添加了node_modules目录
weex-toolkit和weexpack的区别
weex-toolkit 初始化的项目是针对开发单个 Weex 页面而设计的，也就是说这样的项目只包括单个页面开发需要的东西，比如前端页面源文件、webpack 配置、npm 脚本等。项目产生的输出就是一个 JS Bundle 文件，可以自由的进行部署。
weex-pack 是初始化一个完整的 App 工程，包括 Android 和 iOS 的整个 App 起步，前端页面只是其中的一部分。这样的项目最终产出是一个 Android App 和一个 iOS App。
五、创建.babelrc文件
将ES6转成ES5代码执行
{ "presets": ["es2015"] }
六、创建.gitignore文件
配置git不上传的文件和文件夹
# Weex
## idea && node_modules
.idea/
node_modules/
temp/
## output files
dist/
七、在工程根目录下创建index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Weex Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no, email=no">
<link rel="stylesheet" href="./web/assets/style.css">
<script src="./web/assets/url.js"></script>
<script src="./web/assets/qrcode.js"></script>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<h1>Weex Preview</h1>
<div id="app"></div>
<template id="app-template">
<div id="app">
<div class="mock-phone">
<div class="inner">
<iframe id="preview" src="./weex.html"></iframe>
</div>
<div class="camera"></div>
<div class="earpiece"></div>
<div class="home-btn"></div>
</div>
<div id="qrcode">
<h2>QRCode</h2>
<a :href="val" target="_blank"><canvas ref="canvas" width="200" height="200"></canvas></a>
<p class="bundle-url"><a :href="val" target="_blank">{{val}}</a></p>
</div>
</div>
</template>
<script>
console.log('QR CODE URL: ' + url)
new Vue({
el: '#app',
template: '#app-template',
data: { val: url },
mounted: function () {
var qrcodedraw = new QRCodeLib.QRCodeDraw()
qrcodedraw.draw(this.$refs.canvas, this.val, function () {})
}
})
</script>
</body>
</html>
八、在工程目录下创建weex.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>weex-vue-demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no, email=no">
<style>body::before { content: "1"; height: 1px; overflow: hidden; color: transparent; display: block; }</style>
<script src="./assets/phantom-limb.js"></script>
<script src="./node_modules/vue/dist/vue.runtime.js"></script>
<script src="./node_modules/weex-vue-render/dist/index.js"></script>
</head>
<body>
<div id="root"></div>
<script src="./dist/web/index.web.js"></script>
</body>
</html>
最终的工程目录
九、修改web/assets/url.js文件
修改前
var protocol = location.protocol + '//';
var hostname = typeof CURRENT_IP === 'string' ? window.CURRENT_IP : location.hostname;
var port = location.port ? ':' + location.port : '';
var url = protocol + hostname + port + location.pathname.replace(/\/web\/index\.html$/, '/').replace(/\/$/, '/dist/app.weex.js');
修改后
var protocol = location.protocol + '//';
var hostname = typeof CURRENT_IP === 'string' ? window.CURRENT_IP : location.hostname;
var port = location.port ? ':' + location.port : '';
var url = protocol + hostname + port + location.pathname.replace(/\/index\.html$/, '/').replace(/\/$/, '/dist/native/index.js')
十、修改package.json文件
修改"dev"配置前
"scripts": {
"build": "webpack",
"build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
"dev": "weex-builder src dist -w",
"serve": "webpack-dev-server --config webpack.dev.js -p --open"
}
修改"dev"配置后
"scripts": {
"build": "webpack",
"build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
"dev": "webpack --watch & serve -p 12590",
"serve": "webpack-dev-server --config webpack.dev.js -p --open"
}
十一、修改webpack.config.js文件
将webConfig打包到dist/web文件夹下
output: {
path: pathTo.join(__dirname, 'dist', 'web'),
filename: '[name].web.js',
}
将weexConfig打包到dist/native文件夹下
output: {
path: pathTo.join(__dirname, 'dist', 'native'),
filename: '[name].js',
}
十二、运行打包测试
cnpm run dev
打开浏览器 http://xxx.xxx.xxx.xxx:12590
appstore下载 weex playground 点击左上角扫码功能，扫网站上的二维码
现在可以开始coding调试啦
项目工程链接:https://git.oschina.net/lyjappleclub/myweex.git
进入工程目录下载第三方依赖
cnpm install
开启调试
cnpm run dev
