https://www.jianshu.com/p/a5efbbf080d7
本人在使用过程中 使用weex -v查看到weexpack版本一直是0.3.12，造成使用weexpack创建项目时，项目结构太老，都是.we文件，一路尝试下来，最后得出结论可能是node版本过高，原安装的版本是10.10的最新版本，回滚（最快就是去官网下载一个8.12的包，不要被各种命令折腾了）到8.12后，weexpack正常
一、安装node.js
点击链接http://nodejs.cn/download/选择你需要安装的版本（windows ，mac，linux 3种系统的版本），下载你需要的版本
点击安装包，下一步，下一步，安装完成即可。
执行查看node版本号
node -v
显示当前node版本号
deiMac:~ li$ node -vv8.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.进入创建的工程目录，并且安装相关依赖
$cdappName && 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>Weex Preview
Weex Preview
QRCode
{{val}}console.log('QR CODE URL: '+ url)newVue({el:'#app',template:'#app-template',data: {val: url },mounted:function(){varqrcodedraw =newQRCodeLib.QRCodeDraw() qrcodedraw.draw(this.$refs.canvas,this.val,function(){}) } })
八、在工程目录下创建weex.html文件
<!DOCTYPE html>weex-vue-demobody::before{content:"1";height:1px;overflow: hidden;color: transparent;display: block; }
最终的工程目录
九、修改web/assets/url.js文件
修改前
varprotocol = location.protocol +'//';varhostname =typeofCURRENT_IP ==='string'?window.CURRENT_IP : location.hostname;varport = location.port ?':'+ location.port :'';varurl = protocol + hostname + port + location.pathname.replace(/\/web\/index\.html$/,'/').replace(/\/$/,'/dist/app.weex.js');
修改后
varprotocol = location.protocol +'//';varhostname =typeofCURRENT_IP ==='string'?window.CURRENT_IP : location.hostname;varport = location.port ?':'+ location.port :'';varurl = 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
作者：流转的时光
链接：https://www.jianshu.com/p/a5efbbf080d7
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
