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 模拟移动端效果展示
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
上一篇: 图像识别模型