Windows下Weex快速上手

记录Windows下上手Weex的过程以及一些坑

参考地址

重要说明

  1. 设备信息:Windows
  2. 以管理员身份运行CMD
  3. npm version 5.5.1,node version v8.9.0

搭建开发环境

1、下载nodejs,用于安装node和npm,下载地址:https://nodejs.org/en/,校验是否安装成功的方式为:输入node -vnpm -v命令,查看是否正确输出版本号;

2、配置npm的全局模块的存放路径以及cache和tmp的路径;

2.1、在CMD中输入如下命令:

npm config set prefix "G:\ProgramFiles\nodejs\node_global"
npm config set cache "G:\ProgramFiles\nodejs\node_cache"
npm config set tmp "G:\ProgramFiles\nodejs\node_temp"

2.2、之后输入npm config list命令,查看是否成功设置。

2.3、最后配置以下环境变量:

G:\ProgramFiles\nodejs
G:\ProgramFiles\nodejs\node_global

3、安装cnpm,因为即使搭建了梯子,如果服务器配置不高的话,下载速度还是很慢的;

3.1、设置registry,在CMD中输入以下命令实现:

npm config set registry https://registry.npm.taobao.org

3.2、输入以下命令,用于安装cnpm,如果出现由于权限问题打不开文件导致安装失败的情况,请自行解决,我是通过重装系统解决的,其他问题请仔细查看提示信息;

npm install -g cnpm

4、通过以下命令实现weex-toolkit的安装和校验;

安装:cnpm install -g weex-toolkit
校验:weex -v

5、输入以下命令,用于在当前目录下创建一个名为awesome-project的weex项目;

weex create awesome-project

6、在CMD中进入awesome-project文件夹中,输入npm install命令安装项目依赖,运行npm run dev & npm run serve开启watch模式和静态服务器,之后会自动打开浏览器,访问http://localhost:8080/index.html地址。如果不能自动打开浏览器,先输入npm run dev命令开启watch模式,用于监听JS内容的变化,之后再打开一个CMD窗口,输入npm run serve命令开启静态服务器,用于访问weex h5页面,然后会自动打开浏览器,访问http://localhost:8080/index.html地址。如果还是有问题,请自行解决。

其他说明

vue源码位置:在初始化awesome-project项目时已经为我们创建了基本的示例,我们可以在src/index.vue中查看。

集成 Weex 到已有应用

请参考官方教程。

使用 weex-toolkit

请参考官方教程,下面是简述:

初始化 weex 项目

步骤:

  1. weex init awesome-project
  2. npm install
  3. npm run dev & npm run serve

如果执行第3步没有自动跳出弹框的话,请将第3步拆解成下面两步操作执行:

  1. 第一个CMD窗口中执行npm run dev
  2. 第二个CMD窗口中执行npm run serve

备注:Weex h5页面地址:http://localhost:8080/index.html

实时预览

  • 执行weex src/index.vue命令,使用playground应用扫描二维码即可实时预览index.vue页面;
  • 执行weex src --entry src/index.vue命令,可以预览整个项目目录,尚未尝试;

打包weex项目

执行weex compile src/index.vue dist命令,可以打包项目,会在dist目录下生成index.js和index.web.js文件。

调试 Weex 页面

执行weex debug index.vue命令,这个命令会将 index.vue 编译成 JS Bundle 文件 部署到 debug 服务器,然后通过playground应用扫描二维码即可进行调试,而且这个命令会自动检测 index.vue 文件变动,如果发现内容被修改则立即重新编译部署,并刷新 debugger 页面。

添加新评论