Weex环境配置以及踩坑记录
来源:互联网 发布:云计算与人工智能 编辑:程序博客网 时间:2024/05/29 02:50
公司这半年开始在Weex
上发力,作为新人自然要赶紧学习一下。
这周照着官网教程配置环境,发现官网的教程过于顺畅,期间有不少坑,都没说明,一路摔得头破血流,在这里记录一下。
我是Weex官网
Weex
官方提供了 weex-toolkit
的脚手架工具来辅助开发和调试。首先,你需要 Node.js
和 Weex CLi
,下面都是针对Windows
环境的。
安装Node.js
首先在Node.js官网下载安装Node.js。
安装完成后,配置环境变量:
计算机–>系统属性–>高级系统设置–>环境变量:
添加Node.js的安装目录,例如我的是:C:\Program Files\nodejs\
然后查看Node.js
和npm
是否安装成功:
WIN+R
调出命令行工具:
$ node -vv8.4.0$ npm -v5.3.0
则安装成功。
安装weex-toolkit
到这里,坑来了。
官网上明确注明:
哦,我是国内开发者,那就用镜像好了,于是开始安装cnpm
。
速度果然快,顺顺利利的安装好了,然后确认安装是否成功:
$ weex -vv1.0.3weex-builder : v0.2.4weex-previewer : v1.3.4
可以,继续验证:
$ weexC:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtoolkit\src\package\NpmPackage.js:50 throw new Error('resolve path error:'+this.path) ^Error: resolve patherror:C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._weex-previewer at NpmPackage.resolve (C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtoolkit\src\package\NpmPackage.js:50:23) at Command.run (C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtoolkit\src\Command.js:43:13) at XToolkit._done (C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtoolkit\src\xtoolkit.js:149:36) at process.nextTick (C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtoolkit\src\xtoolkit.js:90:22) at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9) at Module.runMain (module.js:606:11) at run (bootstrap_node.js:393:7) at startup (bootstrap_node.js:150:9) at bootstrap_node.js:508:3
出现了神奇的错误,看不懂,百度一下,发现这样的错误都是出在镜像,有网友说这个镜像不完整…简直神坑,没办法,只能老老实实用npm了。
先卸载之前安装的:
npm uninstall -g weex-toolkit
然后硬着头皮安装,这一步会很慢!
npm install -g weex-toolkit
这次依然一切顺利,然后同样顺利通过weex -v
验证,验证weex命令,终于没问题了:
第一个Weex项目
找个合适的路径:
weex init
生成如下文件:
看一眼package.json
:
{ "name": "weex", "description": "weex", "version": "0.1.0", "private": true, "main": "index.js", "keywords": [ "weex", "vue" ], "scripts": { "build": "webpack", "dev": "webpack --watch", "serve": "webpack && node build/init.js && serve -p 8080", "debug": "weex-devtool" }, "dependencies": { "vue": "^2.1.8", "vue-router": "^2.1.1", "vuex": "^2.1.1", "vuex-router-sync": "^4.0.1", "weex-vue-render": "^0.11.2" }, "devDependencies": { "babel-core": "^6.20.0", "babel-loader": "^6.2.9", "babel-preset-es2015": "^6.18.0", "css-loader": "^0.26.1", "ip": "^1.1.4", "serve": "^1.4.0", "vue-loader": "^10.0.2", "vue-template-compiler": "^2.1.8", "webpack": "^1.14.0", "weex-devtool": "^0.2.64", "weex-loader": "^0.4.1", "weex-vue-loader": "^0.2.5" }}
常用的命令都在scripts
里,这里还要先安装依赖:
npm install
之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。
然后我们打开浏览器,进入http://localhost:8080/index.html
即可看到 weex h5 页面。
我们还可以使用weex
命令,一键完成上述步骤,这里拿自动创建的foo.we文件为例:
weex foo.we
浏览器会自动弹出该页面,以后当你每次修改了foo.we
文件,浏览器会自动热更新!
20170929 更新
之前一直用visual studio练习写Weex,但是发现没有代码提示真的是痛苦,很多语法都不熟悉,于是找了一下合适的IDE,最后锁定了Webstorm。
安装Weex
、Weex Language Support
插件:
然后就可以“为所欲为”了!
最后,因为Webstorm只有30天免费,我们可以使用在线激活:
终于可以专心的敲代码了~
- Weex环境配置以及踩坑记录
- Weex踩坑记录
- Weex环境简单配置
- weex环境配置快速上手
- weex入门踩坑
- iOS Mac版 终端安装weex环境以及运行效果
- 记录Gerrit2.8.4环境迁移、安装、配置以及问题解决
- weex初试记录
- 记录weex接入过程
- weex 集成记录
- weex踩坑 干活 记录
- weex环境搭建
- WEEX|环境安装
- weex开发环境搭建
- weex的环境搭建
- 搭建weex开发环境
- weex环境搭建
- weex 开发环境搭建
- 20170827,一周总结
- Android系统自带主题初探
- 自然语言处理入门(6)——基于LDA的文章主题生成
- libpng库的开发
- deep learning的一些资料和教材
- Weex环境配置以及踩坑记录
- 【redis】redis导图宏观总结
- map和set容器自定义比较函数
- [js高手之路]构造函数的基本特性与优缺点
- php使用ZipArchive函数实现文件的压缩与解压缩
- 并查集模板
- 基于ADF4106的锁相环频率器研究与设计
- oracle安装与图形化客户端的使用
- enote笔记语言(2)(ver0.4)