weex - 创建项目
初始化
请确保你已经安装了 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 |
自己创建
我们可以根据 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 - 创建项目的更多相关文章
- weex 创建项目坑2
安装成功weex 创建项目 weex create my-project 提示 需要安装 weexpack Installing 安装失败 后来卸载weex,重新安装weex 执行下面的命令: ...
- weex Mac创建项目
序言:本来在win 10 上创建项目真的很顺利!后来入手一个mac就从mac 上下载了最新的android studio开始搞起了weex,问题来了,weex-toolkit脚手架还是老的,我觉得是w ...
- MVC Core 网站开发(Ninesky) 1、创建项目
又要开一个新项目了!说来惭愧,以前的东西每次都没写完,不是不想写完,主要是我每次看到新技术出来我都想尝试一下,看到.Net Core 手又痒了,开始学MVC Core. MVC Core最吸引我的有三 ...
- MVC5 网站开发之二 创建项目
昨天对项目的思路大致理了一下,今天先把解决方案建立起来.整个解决包含Ninesky.Web.Ninesky.Core,Ninesky.DataLibrary等3个项目.Ninesky.Web是web应 ...
- Maven自定义绑定插件目标:创建项目的源码jar
<build> <plugins> <!-- 自定义绑定,创建项目的源码jar --> <plugin> <groupId>org.apac ...
- Vs2012 创建项目失败 未找到与约束ContractName
刚开始使用vs2012的时候,创建项目失败,后来找到原因 ,是KB2840642V2的原因,于是 卸载之.vs正常
- C#程序员的春天之从零开始学习unity3D游戏开发入门教程二(创建项目及基本面板介绍)
一项目创建: 创建项目是开发的第一步. 运行untiy之后如果是第一次运行会弹出 我们这里随便创建一个项目. 二Untiy面板介绍: 三代码编辑器的切换: 这里我安装了vs2012. 到这里开发环境基 ...
- vs创建项目模板和项模板
原文地址:https://msdn.microsoft.com/zhcn/library/xkh1wxd8(v=vs.140).aspx 如何:创建项目模板 Visual Studio 2015 ...
- cocos2d-x创建项目
2.0之后的创建项目方法 第一步,首先 cd cocos2d-x-2.2.1/tools/project-creator/ 第二步, ./create_project.py -project Hell ...
随机推荐
- unity GPU bound or CPU bound
unity判断GPU CPUbound android 用unity profiler 里面的cpu时间 xcode有直接的显示
- poj 1426 Find The Multiple (bfs 搜索)
Find The Multiple Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18012 Accepted: 729 ...
- 说说C#的数学类,Math,浮点数(上)
说说C#的数学类,Math,浮点数 C#语言支持下图所看到的的数值类型,各自是整数,浮点数和小数 可能不是非常清楚,可是细致看看还是能看清楚的. 在一个C#程序中,整数(没有小数点的数)被觉得是一个i ...
- jmeter脚本开发-BeanShell Sampler与Debug Sampler
BeanShell支持java对象的调用,所以可直接通过BeanShell来调用java接口程序. BeanShell调用java接口例子 1.先编写两个简单的java类 创建java简单工程,并创建 ...
- oracle获取时间毫秒数
select (sysdate-to_date('1970-01-01','yyyy-mm-dd')-8/24)*24*60*60*1000-1* 60 * 60 * 1000 millisecon ...
- 调用getChildFragmentManager时出现的Bug
异常: java.lang.IllegalStateException: Activity has been destroyed at android.support.v4.app.FragmentM ...
- 解决WSDL.EXE不能解析外部Import的XSD的问题
今天碰到一个WSDL,比较奇怪,它是用Java生成的. <types> <xsd:schema> <xsd:import namespace="ht ...
- shell脚本之read工具
#!/bin/bash # -*- coding: utf-8 -*- # echo -n "please input your name: " read name echo &q ...
- socket demo程序
package cn.example.socket; import java.io.BufferedReader; import java.io.IOException; import java.io ...
- RPMforge(Repoforge)源
centos使用rpmforge-release 时间:2017-10-09 09:48:29 阅读:536 评论:0 收藏:0 [点我收藏+] 标签:rpmf ...