windows搭建weex开发环境

 

Windows搭建weex开发环境

  1. 安装node.Js,下载网址:https://nodejs.org/en/
  2. 验证版本: node -v

                            v6.11.3

                            npm -v

                            3.10.10

  1. 安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。通过npm i npm@latest -g更新一下npm的版本,使用前请确认版本是否正确。

weex -v //查看当前weex版本

windows搭建weex开发环境_第1张图片

weex-toolkit也支持直接升级子依赖,如

weex update weex-devtool@latest //@后标注版本后,latest表示最新

国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g weex-toolkit

4、weex 命令验证是否安装成功,它会显示 weex 命令行工具各参数:

windows搭建weex开发环境_第2张图片

5、初始化 Weex 项目:

$weex create hello

执行完命令后,在 hello 目录中就创建了一个使用 Weex 和 Vue 的模板项目。

windows搭建weex开发环境_第3张图片

6、开发

之后我们进入项目所在路径,weex-toolkit 已经为我们生成了标准项目结构。

在 package.json 中,已经配置好了几个常用的 npm script,分别是:

build: 源码打包,生成 JS Bundle

dev: webpack watch 模式,方便开发

serve: 开启HotReload服务器,代码改动的将会实时同步到网页中

我们先通过 npm install 安装项目依赖。之后运行根目录下的 npm run dev & npm run serve 开启 watch 模式和静态服务器。

或者执行npm install后,执行npm start页可以启动项目

然后我们打开浏览器,进入 http://localhost:8080/web/preview.html 即可看到 weex h5 页面。

  1. 执行命令遇到can not find modul “xxxxxxx”,执行命令 npm install -g xxxxxxx即可
  2. 如何卸载weex进行重新装:(建议将node.js也卸载重装):

删除相关文件:

windows搭建weex开发环境_第4张图片

windows搭建weex开发环境_第5张图片

windows搭建weex开发环境_第6张图片

学习参考地址:

http://www.shouce.ren/api/view/a/11617
https://weex.apache.org/cn/tools/toolkit.html

你可能感兴趣的:(windows搭建weex开发环境)