欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Weex项目创建

程序员文章站 2024-03-15 23:38:54
...

1、环境安装

安装Node.js

安装npm

2、创建weex项目

2.1、全局安装  weex-toolkit

npm install weex-toolkit -g

2.2、初始化项目(项目名全部小写)

weex create 项目名

weex create weex-app

2.3、进入目录,安装依赖

cd weex-app

npm install

2.4、启动项目,访问

npm start

http://localhost:8081:访问Web端效果页面

页面结构同Vue,页面源码在  src 目录下

同时可以访问 http://localhost:8081/web/preview.html ,页面内嵌 iframe 模拟移动端效果展示

Weex项目创建

3、weex  Web H5打包

3.1、安装 weexpack 

npm install -g weexpack

3.2、对已有项目进行打包H5

weexpack build web

本地预览Web    项目/release/web/index.html

4、上传github

  • 添加 .gitignore 文件,移除node_modules/文件夹上传git
node_modules/
  • 将项目下的 web文件夹中的 assets/ 和 preview.html添加到 release/ 下,使得本地预览正常 目录结构

release

assets
web
preview.html

  • 修改preview.html内容
<iframe id="preview" src="./web/index.html" frameborder="0"></iframe>

访问 项目/release/preview.html

5、项目页面结构

这里以Vue单文件组件为例   *.vue文件

template:

<template>
  <text class="message">Weex Vue demo222</text>
</template>

script:

<script>
module.exports = {
    data: function() {
        return {
        	content: 'weex'
        }
    }
}
</script>

style: 可以使用 CSS预处理工具

<style lang="less" scoped>
@color: red;

.message {
    color: @color;
}
</style>
<template>
    <text class="message">Weex Vue demo222</text>
</template>
<script>
module.exports = {
    data: function() {
        return {
        	content: 'weex'
        }
    }
}
</script>
<style lang="less" scoped>
@color: red;

.message {
    color: @color;
}
</style>

页面入口 src/index.vue(类似App.vue)

路由配置 src/router.js