初始化

请确保你已经安装了 Node.js，然后全局安装 weex-toolkit。

npm install weex-toolkit -g

这条命令会向你命令行环境中注册一个 weex 命令。你可以用 weex create 命令来创建一个空的模板项目：

weex create awesome-app

命令执行完以后，在当前目录的 awesome-app 文件夹里就有了一个空的 Weex + Vue.js 项目。

开发

下一步就是进入刚刚创建的文件夹，并且安装依赖，然后执行 npm start：

cd awesome-app
npm install
npm start

自己创建

我们可以根据 webpack 和 npm 自己来创建简单的 weex 的项目。

  • 新建一个 package.json 文件，并且编写内容如下：

     {
    
  "name": "weex",
    
  "version": "1.0.0",
    
  "description": "",
    
  "main": "index.js",
    
  "scripts": {
    
    "build": "webpack",
    
    "dev": "webpack --watch",
    
    "serve": "serve -p 8080",
    
    "test": "echo \"Error: no test specified\" && exit 1"
    
  },
    
  "keywords": [],
    
  "author": "",
    
  "license": "ISC",
    
  "devDependencies": {
    
    "babel-core": "^6.18.0",
    
    "babel-loader": "^6.2.5",
    
    "babel-plugin-transform-runtime": "^6.15.0",
    
    "babel-preset-es2015": "^6.14.0",
    
    "babel-runtime": "^6.11.6",
    
    "serve": "^1.4.0",
    
    "webpack": "^1.13.1",
    
    "weex-html5": "^0.4.1",
    
    "weex-loader": "^0.3.4",
    
    "weex-components": "^0.2.0"
    
  }
    
}

  • 新建一个 webpack.config.js 文件，并且编写内容如下：

    require('webpack')
    
require('weex-loader')

var path = require('path')

module.exports = {
    
  entry: {
    
    main: path.join(__dirname, 'src', 'hello.we?entry=true')
    
  },
    
  output: {
    
    path: 'dist',
    
    filename: '[name].js'
    
  },
    
  module: {
    
    loaders: [
    
      {
    
        test: /\.we(\?[^?]+)?$/,
    
        loaders: ['weex-loader']
    
      }
    
    ]
    
  }
    
}

  • 创建 src 目录，并且在 src 目录中创建 hello.we 文件，内容如下所示：

    <template>
    
    <div>
    
        <div class="title">
    
            <text class="h1">{{ title }}</text>
    
            <text class="button" onclick="click">点击</text>
    
        </div>

    </div>

</template>

<style>
    
    .h1{
    
        top:200px ;
    
        color: black;
    
        text-align: center;
    
    }
    
    .button{
    
        top:300px;
    
        text-align: center;
    
        background-color: #4e7d95;
    
        font-size: 30px;
    
        padding: 25;
    
        margin: 15;
    
        color: white;
    
        border-radius: 30;
    
    }
    
</style>

<script>
    
    module.exports = {
    
        data: {
    
            title: "hello world"
    
        },
    
        methods: {
    
            click: function(){
    
                this.title = "hello weew"
    
            }
    
        }
    
    }
    
</script>

  • 创建 index.html 文件，作为 web 端的入口，内容如下：

    <!DOCTYPE html>
    
<html>
    
<head>
    
    <meta charset="utf-8">
    
    <title>Weex HTML5</title>
    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    
    <meta name="apple-touch-fullscreen" content="yes" />
    
    <meta name="format-detection" content="telephone=no, email=no" />
    
    <style>
    
        html, body, #weex {
    
            width: 100%;
    
            height: 100%;
    
        }
    
    </style>
    
    <script src="../node_modules/weex-html5/dist/weex.js"></script>
    
</head>
    
<body>
    
<div id="weex"></div>
    
<script src="dist/main.js"></script>

<script>
    
    (function () {
    
        function getUrlParam (key) {
    
            var reg = new RegExp('[?|&]' + key + '=([^&]+)')
    
            var match = location.search.match(reg)
    
            return match && match[1]
    
        }

        var loader = getUrlParam('loader') || 'xhr'
    
        var page = getUrlParam('page') || 'dist/main.js'

        window.weex.init({
    
            appId: location.href,
    
            loader: loader,
    
            source: page,
    
            rootId: 'weex'
    
        })
    
    })();
    
</script>
    
</body>
    
</html>

weex - 创建项目的更多相关文章

  1. weex 创建项目坑2

    安装成功weex 创建项目 weex create my-project 提示 需要安装 weexpack    Installing 安装失败 后来卸载weex,重新安装weex 执行下面的命令: ...

  2. weex Mac创建项目

    序言:本来在win 10 上创建项目真的很顺利!后来入手一个mac就从mac 上下载了最新的android studio开始搞起了weex,问题来了,weex-toolkit脚手架还是老的,我觉得是w ...

  3. MVC Core 网站开发（Ninesky） 1、创建项目

    又要开一个新项目了!说来惭愧,以前的东西每次都没写完,不是不想写完,主要是我每次看到新技术出来我都想尝试一下,看到.Net Core 手又痒了,开始学MVC Core. MVC Core最吸引我的有三 ...

  4. MVC5 网站开发之二 创建项目

    昨天对项目的思路大致理了一下,今天先把解决方案建立起来.整个解决包含Ninesky.Web.Ninesky.Core,Ninesky.DataLibrary等3个项目.Ninesky.Web是web应 ...

  5. Maven自定义绑定插件目标：创建项目的源码jar

    <build> <plugins> <!-- 自定义绑定,创建项目的源码jar --> <plugin> <groupId>org.apac ...

  6. Vs2012 创建项目失败 未找到与约束ContractName

    刚开始使用vs2012的时候,创建项目失败,后来找到原因 ,是KB2840642V2的原因,于是 卸载之.vs正常

  7. C#程序员的春天之从零开始学习unity3D游戏开发入门教程二（创建项目及基本面板介绍）

    一项目创建: 创建项目是开发的第一步. 运行untiy之后如果是第一次运行会弹出 我们这里随便创建一个项目. 二Untiy面板介绍: 三代码编辑器的切换: 这里我安装了vs2012. 到这里开发环境基 ...

  8. vs创建项目模板和项模板

    原文地址:https://msdn.microsoft.com/zhcn/library/xkh1wxd8(v=vs.140).aspx 如何:创建项目模板 Visual Studio 2015   ...

  9. cocos2d-x创建项目

    2.0之后的创建项目方法 第一步,首先 cd cocos2d-x-2.2.1/tools/project-creator/ 第二步, ./create_project.py -project Hell ...

随机推荐

  1. DL380 G6 BIOS刷新方法

    bios下载地址SP44873.exe (5.9 MB) http://h20000.www2.hp.com/bizsupport/TechSupport/SoftwareDescription.js ...

  2. 基于3D Vision眼镜的OSG立体显示 【转】

    http://blog.csdn.net/qq_20038925/article/details/50510565 OSG 立体显示 3D Vision眼镜:所实现的是被动立体. 1.本人最近在做os ...

  3. spring+mybatis项目启动报错Initializing Spring root WebApplicationContext

    这个问题很怪异,各种各样的情况都会导致这个问题的出现,主要是由于sping加载读取配置文件的时候出了问题.我在处理mybatis的时候出现了这个问题,后来排查发现,在mybatis的配置文件中如果有大 ...

  4. 怎样在caffe中添加layer以及caffe中triplet loss layer的实现

    关于triplet loss的原理.目标函数和梯度推导在上一篇博客中已经讲过了.详细见:triplet loss原理以及梯度推导.这篇博文主要是讲caffe下实现triplet loss.编程菜鸟.假 ...

  5. C# 中 in,out,ref 的作用与区别

    In:过程不会改写In的内容 Out和out:传入的值不会被过程所读取,但过程可以写 ref:传入的值,过程会读,也会写 就象你把布料送到裁缝的一个收料箱(裁缝用这个区别是哪家客户) IN:这块布料, ...

  6. python——数据结构之单链表的实现

    链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结点都包含了可以链接起来的地址 信息,所以用一个变量 ...

  7. Log4j介绍,log4j.properties配置详解

    http://www.cnblogs.com/simle/archive/2011/09/29/2195341.html本文主要解释log4j的配置文件各个配置项的含义,内容是从网上转载的 1.Log ...

  8. URL中的#号

    一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如, http://www.example.com/index.html#print 就代表网页index.html的prin ...

  9. How to manually remove an infected file from your computer

    http://blog.csdn.net/pipisorry/article/details/41258577 How to manually remove an infected file from ...

  10. ST股福音：涨停潮开始！ 最全ST摘帽股汇总！

    本周ST股摘帽行情提前预演,ST股上演涨停潮,部分ST股甚至出现连续涨停.云财经在三季报披露之前曾经做过一期ST股摘帽分析,在三季报正式披 露完毕后,以及部分ST公司公布了2015年年报预告,ST股能 ...