Weex项目创建

版权声明：无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/89500332

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 模拟移动端效果展示

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