weex项目构建

简介: weex已经上线几个月了,热度一直不减,给github上面star已经有5000+,很多人对weex还不是很了解,weex是一个跨三端、动态化解决方案,方案中借鉴react native的优点并且进行针对性优化补强,这篇博文简单带着大家玩一下weex的项目构建~

前言

weex已经上线几个月了,热度一直不减,给github上面star已经有5000+,很多人对weex还不是很了解,weex是一个跨三端、动态化解决方案,方案中借鉴react native的优点并且进行针对性优化补强,这篇博文简单带着大家玩一下weex的项目构建~

搭建weex项目

1、安装 weex-toolkit

// weex 集成环境
sudo npm install -g weex-toolkit
// weex 查看帮助指令
weex --help

2、使用weex-toolkit构建项目

【1】、项目初始化

weex init 或者 weex create

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

# mkdir weex-one& cd weex-one
# weex init
prompt: Project Name:  (weex-one)
file: .gitignore created.
file: README.md created.
file: index.html created.
file: package.json created.
file: src/main.we created.
file: webpack.config.js created.

此时你会看到项目的目录结构如下:

项目路径

【2】、安装npm依赖

// 安装依赖包,安装成功后,会增加一个node_modules包
npm install

【3】、启动serve:

我们首先看一下package.json下的指令

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

OK,可以开始了,我们一次执行下面两条指令

npm run dev
npm run serve

一切正常会在终端出现如下日志:

> weex-one@1.0.0 dev /Users/walid/Desktop/develop/weex/weex-one
> webpack --watch & serve -p 8081
serving /Users/walid/Desktop/develop/weex/weex-one on port 8081
Hash: a620c110038cc680ff1e
Version: webpack 1.13.1
Time: 115ms
  Asset     Size  Chunks             Chunk Names
main.js  2.85 kB       0  [emitted]  main
    + 1 hidden modules

OK,我们尝试下打开localhost:8081看下效果吧~

运行效果

目录
相关文章
|
9月前
|
前端开发 JavaScript API
Vite 3.0 正式发布,下一代前端构建工具!
Vite 3.0 正式发布,下一代前端构建工具!
156 0
|
5月前
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
223 3
|
Web App开发 前端开发 JavaScript
用electron打包前端应用初体验
用electron打包开发桌面应用遇到的各种问题和解决办法
238 1
|
前端开发 JavaScript API
前端工程化和构建工具的选择
前端工程化和构建工具的选择
170 1
|
缓存 前端开发 JavaScript
模块化开发与前端打包工具
模块化开发与前端打包工具
200 0
|
缓存 资源调度 前端开发
前端工程化之构建工具
构建解决的问题 包管理工具 任务式构建工具 模块化:模块定义与模块化的构建工具
216 0
前端工程化之构建工具
|
前端开发 JavaScript 开发者
前端工程化构建工具之Grunt
在前端工程化构建工具中,Grunt是一个非常流行的开源工具。
150 0
|
Dart API
Flutter脚手架简单介绍
Flutter脚手架是Flutter提供的一个命令行工具,用于创建新的Flutter项目,并提供了一些常用的开发功能和配置。
Flutter脚手架简单介绍
|
前端开发 JavaScript Go
【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具2
【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具
238 0
【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具2
|
Web App开发 缓存 前端开发
【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具
【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具
517 0
【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具

热门文章

最新文章