weex 项目上传服务器,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']

}

]

}

}

在当前目录，添加 Weex 项目的相关依赖，在终端输入：

npm install

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

{{ title }}

点击

.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;

}

module.exports = {

data: {

title: "hello world"

},

methods: {

click: function(){

this.title = "hello weew"

}

}

}

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

Weex HTML5

html, body, #weex {

width: 100%;

height: 100%;

}

(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'

})

})();

在项目根目录，启动 webpack

npm run dev // 开启文件监控

npm run serve // 开启服务器

最终项目如下图所示：

1.png

启动浏览器，在地址栏输入：http://localhost:8080，可以看到页面如下：

2.png