初始化

请确保你已经安装了 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. 通过案例对SparkStreaming透彻理解三板斧之二

    本节课主要从以下二个方面来解密SparkStreaming: 一.解密SparkStreaming运行机制 二.解密SparkStreaming架构 SparkStreaming运行时更像SparkC ...

  2. Android API Guides---Host-based Card Emulation

    Host-based Card Emulation 很多提供NFC功能的Andr​​oid手机已经支持NFC卡模拟.在大多数情况下.该卡是由在该装置的单独芯片仿真,称为安全元件. 无线运营商提供了非常 ...

  3. [加入用户]解决useradd 用户后没有加入用户Home文件夹的情况,Linux改变文件或文件夹的訪问权限命令,linux改动用户password,usermod的ysuum安装包。飞

    usermod的yum安装包: shadow-utils 将nobody用户加入到nogroup 组: usermod -g nogroup nobody cat /etc/passwd|grep n ...

  4. 奇怪也哉!做一个WebApp居然遇到了FF浏览器进不去某页的问题。

    一个小WebApp,原定login完后就进某页面.前天晚上之前一直在FF浏览器上调试,都正常. 前天晚上稍修改了,提交war上传,之后就休息了. 昨天晚上有些事情处理打开一看,乖乖,点登录后就在登陆页 ...

  5. STL源码剖析(空间配置器)

    前言 在STL中,容器的定义中都带一个模板参数,如vector template <class T, class Alloc = alloc> class vector {...} 其中第 ...

  6. 一个256行代码的第一人称引擎(Direct2D移植版)

    这篇文章是对"a first person engine in 265 lines"[1]的一个Direct2D版的移植.看到这篇文章我立刻就想到了QUAKE,当然QUAKE使用了 ...

  7. Eclipse 一直Building Workspace 的解决办法

    Eclipse 一直不停 building workspace完美解决总结 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭  3.maven下载lib挂起 等.. 二.解决总结 (1).解决 ...

  8. RecycleView实现多布局可展开列表

    代码地址如下:http://www.demodashi.com/demo/13193.html 前言 在开发的时候,我们不免会遇到这么一种数据展示,该数据有以下特征: 数据要以列表形式展示 每条数据要 ...

  9. jQuery find() 搜索所有段落中的后代 C# find() 第一个匹配元素 Func 有返回值 Action是没有返回值 Predicate 只有一个参数且返回值为bool 表达式树Expression

    所有p后代span Id为 TotalProject 的 select 标签 的后代 option标签 为选中的 text using System; using System.Collections ...

  10. 转:EMQTT测试--安装与测试 (windows)

    官网 我下载的是windows版 安装 参考 http://emqtt.com/docs/install.html 将下载的压缩包解压,我解压到了D盘 命令行窗口,cd到程序目录 控制台模式启动: . ...