weex項(xiàng)目構(gòu)建
前言
引用一些weex官網(wǎng)上的介紹,weex是一套構(gòu)建高性能、可擴(kuò)展的原聲應(yīng)用跨平臺(tái)開(kāi)發(fā)方案,關(guān)于weex與rn的諸多對(duì)比,草民就不在多牢騷了,在此只強(qiáng)調(diào)一點(diǎn),rn強(qiáng)調(diào)的是learn once write everywhere,而weex強(qiáng)調(diào)的則是write onec run everywhere,很明顯看出Facebook更加注重的是以技術(shù)手段來(lái)解決問(wèn)題,但是別忘了技術(shù)是服務(wù)于業(yè)務(wù)的,如果說(shuō) vue 是把高大上的東西做的容易近人,那么我想說(shuō)的是weex把容易近人的東西做的更加高大上,可以說(shuō)weex 與 vue 是一次近乎完美的融合~
搭建weex項(xiàng)目
安裝依賴
- 安裝 node.js
安裝 Node.js 方式多種多樣,最簡(jiǎn)單的方式是在 Node.js官網(wǎng) 下載安裝即可
對(duì)于 Mac,則推薦使用 Homebrew 進(jìn)行安裝:
brew install node
安裝完成后,使用以下命令檢測(cè)是否安裝成功:
$ node -v
v7.4.0
$ npm -v
4.0.5
- 安裝 weex-toolkit
$ npm install -g weex-toolkit@beta
國(guó)內(nèi)開(kāi)發(fā)者可以考慮使用淘寶的 npm 鏡像 —— cnpm 安裝 weex-toolkit
$ npm install -g cnpm
$ cnpm install -g weex-toolkit@beta
使用weex-toolkit構(gòu)建項(xiàng)目
- 項(xiàng)目初始化
mkdir weex-one
cd weex-one
weex init weex-one
執(zhí)行指令后,會(huì)看到如下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.
- 安裝npm依賴
// 安裝依賴包,安裝成功后,會(huì)增加一個(gè)node_modules包
npm install
- 啟動(dòng)serve:
看一下package.json下的指令:
"build": "webpack",// build 配置
"dev": "webpack --watch",// webpack 監(jiān)聽(tīng),可以自動(dòng)監(jiān)聽(tīng)修改
"serve": "serve -p 8080",// 啟動(dòng)服務(wù)
"test": "echo \"Error: no test specified\" && exit 1"
啟動(dòng):
npm run serve
npm run dev
我們嘗試下打開(kāi)localhost:8080看下效果吧~
運(yùn)行效果
QQ技術(shù)交流群 :
327169027(weex交流群3)