美文网首页
Weex从零开始(一)Windows下weex环境搭建

Weex从零开始(一)Windows下weex环境搭建

作者: 博吖博 | 来源:发表于2017-09-14 16:09 被阅读0次

    写在前面

    虽然标题叫做从零开始,不过显然weex不是一门可以从零开始的技术,本文旨在记录个人在学习weex过程中的一些经历。
    作为一个移动端开发者,native开发进行到一定阶段的时候,你或多或少都会关注到web app的相关技术,然后感受着Learn once, write anywhere or Write Once Run Everywhere的感召(威胁?)去这个未知的神秘世界一探究竟。

    WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的跨平台APP.

    weex环境搭建

    需要的环境包括:
    1.node.js(建议4.0以上)
    2.npm

    npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。

    3.weex-toolkit(WEEX工具包)

    node.js安装

    首先下载安装Node.js
    全程下一步就可以了
    安装完成,cmd输入

    node -v
    v 版本号
    npm -v
    v 版本号
    

    成功,下一步

    weex-toolkit安装

    用npm来下载安装weex-toolkit,cmd输入

    npm install -g weex-toolkit 
    

    默认的npm默认的是https://registry.npmjs.org/这个源,下载的非常慢建议直接

    npm config set registry https://registry.npm.taobao.org  
    npm install -g weex-toolkit  
    

    安装完毕后

    weex -v
    v 版本号
    

    ok,至此weex的基本开发环境已经配置完成。下面我们就开始我们的第一个程序。

    第一个weex

    先在本地目录下新建一个app目录,F:\weextest,然后cmd进入这个路径后
    项目初始化

    weex init
    

    依赖安装

    npm install
    

    安装完成后就会看到整个目录下的文件结构如下:

    file structure
    src/: all source code
    build/
    : some build scripts
    dist/: where places generated code
    dist/assets/
    : some assets for Web preview
    dist/index.html: a page with Web preview and qrcode of Weex js bundle
    dist/preview.html: Web render
    .babelrc: babel config (preset-env by default)
    .eslintrc: eslint config (standard by default)

    在根目录下的package.json 中可以看到

     "scripts": {
        "start": "node build/dev-server.js",
        "build": "node build/build.js",
        "serve": "npm run build && serve -p 8080",
        "debug": "weex-devtool"
      }
    

    build: 源码打包,生成 JS Bundle
    serve: 开启静态服务器
    debug: 调试模式

    接下来我们试一下serve模式

    npm run serve
    

    运行完成之后,在浏览器输入

    http://localhost:8080/
    

    大功告成!

    参考

    http://m.blog.csdn.net/ufocode/article/details/75171290
    http://blog.csdn.net/hytfly/article/details/65680295

    相关文章

      网友评论

          本文标题:Weex从零开始(一)Windows下weex环境搭建

          本文链接:https://www.haomeiwen.com/subject/grzrsxtx.html