weex 项目构建

weex项目构建

前言

引用一些weex官网上的介绍,weex是一套构建高性能、可扩展的原声应用跨平台开发方案,关于weex与rn的诸多对比,草民就不在多牢骚了,在此只强调一点,rn强调的是learn once write everywhere,而weex强调的则是write onec run everywhere,很明显看出Facebook更加注重的是以技术手段来解决问题,但是别忘了技术是服务于业务的,如果说 vue 是把高大上的东西做的容易近人,那么我想说的是weex把容易近人的东西做的更加高大上,可以说weexvue 是一次近乎完美的融合~

搭建weex项目

安装依赖

  1. 安装 node.js

安装 Node.js 方式多种多样,最简单的方式是在 Node.js官网 下载安装即可

对于 Mac,则推荐使用 Homebrew 进行安装:

brew install node

安装完成后,使用以下命令检测是否安装成功:

$ node -v
v7.4.0
$ npm -v
4.0.5
  1. 安装 weex-toolkit
$ npm install -g weex-toolkit@beta

国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

$ npm install -g cnpm
$ cnpm install -g weex-toolkit@beta

使用weex-toolkit构建项目

  1. 项目初始化
mkdir weex-one
cd weex-one
weex init weex-one

执行指令后,会看到如下log

prompt: Project Name:  (weex-one)
file: .gitignore created.
file: README.md created.
file: index.html created.
file: package.json created.
file: src/weex-bootstrap.we created.
file: webpack.config.js created.
  1. 安装npm依赖
// 安装依赖包,安装成功后,会增加一个node_modules包
npm install
  1. 启动serve:

看一下package.json下的指令:

"build": "webpack",// build 配置 
"dev": "webpack --watch",// webpack 监听,可以自动监听修改
"serve": "serve -p 8080",// 启动服务
"test": "echo \"Error: no test specified\" && exit 1"

启动:

npm run serve
npm run dev

我们尝试下打开localhost:8080看下效果吧~

运行效果

QQ技术交流群 :
327169027(weex交流群3)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Weex-Toolkit Weex-Toolkit 主要用于快速构建 weex 的项目并且开发和调试。 Weex...
    ihuangyg阅读 8,476评论 1 51
  • 真头疼啊,我只能说Weex团队认真敬业,更新速度有点快。但有点就是文档更新速度有点跟不上。还是进入正题吧。Weex...
    Snoopy008阅读 620评论 0 1
  • 引子 这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享,也算是对学习成果的总结。文...
    一缕殇流化隐半边冰霜阅读 12,430评论 53 165
  • 项目 假设你已经安装好了weex环境,如果没有请先查阅官网进行安装 如果提醒你没有weexpack,先npm in...
    jacklin1992阅读 646评论 0 0
  • 昨晚特别想小一,今晚突然听到这首歌,想起鼓浪屿小旅馆里天天早上十点播放的歌,网易云里已经存下了两首... 念念不忘...
    ninvxv阅读 189评论 0 0

友情链接更多精彩内容