初始化

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

  1. npm install weex-toolkit -g

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

  1. weex create awesome-app

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

开发

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

  1. cd awesome-app
    npm install
    npm start

自己创建

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

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

    1.  {
    2.   "name": "weex",
    3.   "version": "1.0.0",
    4.   "description": "",
    5.   "main": "index.js",
    6.   "scripts": {
    7.     "build": "webpack",
    8.     "dev": "webpack --watch",
    9.     "serve": "serve -p 8080",
    10.     "test": "echo \"Error: no test specified\" && exit 1"
    11.   },
    12.   "keywords": [],
    13.   "author": "",
    14.   "license": "ISC",
    15.   "devDependencies": {
    16.     "babel-core": "^6.18.0",
    17.     "babel-loader": "^6.2.5",
    18.     "babel-plugin-transform-runtime": "^6.15.0",
    19.     "babel-preset-es2015": "^6.14.0",
    20.     "babel-runtime": "^6.11.6",
    21.     "serve": "^1.4.0",
    22.     "webpack": "^1.13.1",
    23.     "weex-html5": "^0.4.1",
    24.     "weex-loader": "^0.3.4",
    25.     "weex-components": "^0.2.0"
    26.   }
    27. }

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

    1. require('webpack')
    2. require('weex-loader')
    4. var path = require('path')
    6. module.exports = {
    7.   entry: {
    8.     main: path.join(__dirname, 'src', 'hello.we?entry=true')
    9.   },
    10.   output: {
    11.     path: 'dist',
    12.     filename: '[name].js'
    13.   },
    14.   module: {
    15.     loaders: [
    16.       {
    17.         test: /\.we(\?[^?]+)?$/,
    18.         loaders: ['weex-loader']
    19.       }
    20.     ]
    21.   }
    22. }

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

    1. <template>
    2.     <div>
    3.         <div class="title">
    4.             <text class="h1">{{ title }}</text>
    5.             <text class="button" onclick="click">点击</text>
    6.         </div>
    8.     </div>
    10. </template>
    12. <style>
    13.     .h1{
    14.         top:200px ;
    15.         color: black;
    16.         text-align: center;
    17.     }
    18.     .button{
    19.         top:300px;
    20.         text-align: center;
    21.         background-color: #4e7d95;
    22.         font-size: 30px;
    23.         padding: 25;
    24.         margin: 15;
    25.         color: white;
    26.         border-radius: 30;
    27.     }
    28. </style>
    30. <script>
    31.     module.exports = {
    32.         data: {
    33.             title: "hello world"
    34.         },
    35.         methods: {
    36.             click: function(){
    37.                 this.title = "hello weew"
    38.             }
    39.         }
    40.     }
    41. </script>

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

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>Weex HTML5</title>
    6.     <meta name="apple-mobile-web-app-capable" content="yes" />
    7.     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    8.     <meta name="apple-touch-fullscreen" content="yes" />
    9.     <meta name="format-detection" content="telephone=no, email=no" />
    10.     <style>
    11.         html, body, #weex {
    12.             width: 100%;
    13.             height: 100%;
    14.         }
    15.     </style>
    16.     <script src="../node_modules/weex-html5/dist/weex.js"></script>
    17. </head>
    18. <body>
    19. <div id="weex"></div>
    20. <script src="dist/main.js"></script>
    22. <script>
    23.     (function () {
    24.         function getUrlParam (key) {
    25.             var reg = new RegExp('[?|&]' + key + '=([^&]+)')
    26.             var match = location.search.match(reg)
    27.             return match && match[1]
    28.         }
    30.         var loader = getUrlParam('loader') || 'xhr'
    31.         var page = getUrlParam('page') || 'dist/main.js'
    33.         window.weex.init({
    34.             appId: location.href,
    35.             loader: loader,
    36.             source: page,
    37.             rootId: 'weex'
    38.         })
    39.     })();
    40. </script>
    41. </body>
    42. </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. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境：3.安装Oracle RAC-3.3.安装前检查

    3.3. 安装前检查 1.检查节点连通性 或:./runcluvfy.sh stage -pre crsinst -n linuxrac1,linuxrac2 -fixup -verbose [gri ...

  2. Arduino+GPRS 的环境监控方案

    设备前台界面:http://www.lewei50.com/home/gatewaystatus/361#576 本实采用的硬件,除了一个串口模块以外(约200元),其他均可以从taobo上面找到标准 ...

  3. JQuery日记_5.14 Sizzle选择器(七)

    上篇说道,tokenize方法会把selector切割成一个个selector逻辑单元(如div>a是三个逻辑单元 'div','>','a')并为之片段赋予相应类型的过滤函数. for ...

  4. jQuery 创建html

    jQuery 创建html

  5. EXTJS4自学手册——图形行为（rotate,scale）

    一.旋转图像: { xtype: 'button', text: '旋转的字', handler: function (btn) { Ext.create('Ext.window.Window', { ...

  6. Azure Storage Blob Go SDK示例

    简介 前面一篇博客介绍了关于Azure ManagerAPI Go SDK的使用,本篇继续介绍使用Blob Go SDK 操作中国区Azure Blob. SDK下载: go get github.c ...

  7. CKEditor的安装与基本使用（JSP）

    文章分类:Web前端 一.下载CKEditor 1. 直接下载地址.当前最新版本号为3.5: http://download.cksource.com/CKEditor/CKEditor/CKEdit ...

  8. c++opencv项目移植到Android（Mat—》IplImage*）

    近期将PC机上的行人检測的C++项目移植到Android平台遇到非常多的问题.因此,记录一些重点. 1. 最好能够參照Opencv sample 里面的mix-processing. 2. 数据结构的 ...

  9. sql server 函数--rand() 生成整数的随机数

    rand() 定义: 返回从0到1之间的随机浮点值. 举例说明: select rand() as 随机数   结果如图: select cast( floor(rand()*N) as int )  ...

  10. vivado与modelsim的联合仿真(一)

    vivado软件中也自带仿真工具,但用了几天之后感觉仿真速度有点慢,至少比modelsim慢挺多的.而modelsim是我比较熟悉的一款仿真软件,固然选它作为设计功能的验证.为了将vivado和mod ...