* [doc] complete the set-up-env documentation
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/f8a3a23d Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/f8a3a23d Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/f8a3a23d Branch: refs/heads/0.16-dev Commit: f8a3a23d506cb693a3780d9cca28b511a7b4dfdd Parents: ab9ef1b Author: erha19 <faterr...@gmail.com> Authored: Mon Sep 25 16:50:55 2017 +0800 Committer: erha19 <faterr...@gmail.com> Committed: Mon Sep 25 16:50:55 2017 +0800 ---------------------------------------------------------------------- doc/source/cn/guide/set-up-env.md | 64 ++++++++++++++++++---------------- doc/source/guide/set-up-env.md | 58 ++++++++++++++++-------------- 2 files changed, 66 insertions(+), 56 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/f8a3a23d/doc/source/cn/guide/set-up-env.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/guide/set-up-env.md b/doc/source/cn/guide/set-up-env.md index 98d1b0d..48ae606 100644 --- a/doc/source/cn/guide/set-up-env.md +++ b/doc/source/cn/guide/set-up-env.md @@ -28,26 +28,26 @@ brew install node ```bash $ node -v -v6.3.1 +v6.11.3 $ npm -v -3.10.3 +3.10.10 ``` é常ï¼å®è£ äº Node.js ç¯å¢ï¼npm å 管çå·¥å ·ä¹éä¹å®è£ äºãå æ¤ï¼ç´æ¥ä½¿ç¨ npm æ¥å®è£ weex-toolkitã > npm æ¯ä¸ä¸ª JavaScript å 管çå·¥å ·ï¼å®å¯ä»¥è®©å¼åè è½»æ¾å > ±äº«åéç¨ä»£ç ãWeex å¾å¤ä¾èµæ¥èªç¤¾åºï¼åæ ·ï¼Weex > ä¹å°å¾å¤å·¥å ·åå¸å°ç¤¾åºæ¹ä¾¿å¼åè 使ç¨ã -**注æ: ** weex-toolkit å¨ 1.0.1 ä¹åææ¯æåå§å Vue 项ç®ï¼ä½¿ç¨å请确认çæ¬æ¯å¦æ£ç¡®ã +**注æ: ** å¨`weex-toolkit`1.0.8çæ¬åæ·»å äºnpm5è§èç`npm-shrinkwrap.json`ç¨äºéå®å ä¾èµï¼æ npmçæ¬<5çç¨æ·éè¦éè¿`npm i npm@latest -g`æ´æ°ä¸ä¸npmççæ¬ï¼ä½¿ç¨å请确认çæ¬æ¯å¦æ£ç¡®ã ```bash $ npm install -g weex-toolkit -$ weex -v - -v1.0.3 -weex-builder : v0.2.4 -weex-previewer : v1.3.4 +$ weex -v //æ¥çå½åweexçæ¬ ``` +weex-toolkitä¹æ¯æç´æ¥å级åä¾èµï¼å¦ï¼ +``` +weex update weex-devtool@latest //@åæ 注çæ¬åï¼latest表示ææ° +``` å½å å¼åè å¯ä»¥èè使ç¨æ·å®ç npm éå ââ [cnpm](https://npm.taobao.org/) å®è£ weex-toolkit @@ -87,42 +87,46 @@ $ weex create awesome-project - `build`: æºç æå ï¼çæ JS Bundle - `dev`: webpack watch 模å¼ï¼æ¹ä¾¿å¼å -- `serve`: å¼å¯éææå¡å¨ -- `debug`: è°è¯æ¨¡å¼ +- `serve`: å¼å¯HotReloadæå¡å¨ï¼ä»£ç æ¹å¨çå°ä¼å®æ¶åæ¥å°ç½é¡µä¸ æ们å éè¿ `npm install` å®è£ 项ç®ä¾èµãä¹åè¿è¡æ ¹ç®å½ä¸ç `npm run dev & npm run serve` å¼å¯ watch 模å¼åéææå¡å¨ã ç¶åæ们æå¼æµè§å¨ï¼è¿å ¥ `http://localhost:8080/index.html` å³å¯çå° weex h5 页é¢ã -åå§åæ¶å·²ç»ä¸ºæ们å建äºåºæ¬ç示ä¾ï¼æ们å¯ä»¥å¨ `src/foo.vue` ä¸æ¥çã +åå§åæ¶å·²ç»ä¸ºæ们å建äºåºæ¬ç示ä¾ï¼æ们å¯ä»¥å¨ `src/index.vue` ä¸æ¥çã 代ç å¦ä¸æç¤ºï¼ ```html <template> - <div class="wrapper"> - <text class="weex">Hello Weex !</text> - <text class="vue">Hello Vue !</text> + <div class="wrapper" @click="update"> + <image :src="logoUrl" class="logo"></image> + <text class="title">Hello {{target}}</text> + <text class="desc">Now, let's use vue to build your weex app.</text> </div> </template> -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .weex { - font-size: 60px; - text-align: center; - color: #1B90F7; - } - .vue { - font-size: 60px; - text-align: center; - margin-top: 30px; - color: #41B883; - } +<style> + .wrapper { align-items: center; margin-top: 120px; } + .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; } + .logo { width: 360px; height: 156px; } + .desc { padding-top: 20px; color:#888; font-size: 24px;} </style> + +<script> + export default { + data: { + logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png', + target: 'World' + }, + methods: { + update: function (e) { + this.target = 'Weex' + console.log('target:', this.target) + } + } + } +</script> ``` å ³äº Weex è¯æ³é¨åï¼ä½ å¯ä»¥ç´æ¥åè [Vue Guide](https://vuejs.org/v2/guide/)ï¼è¿éä¸åéå¤ä»ç»ãå¦ææ¨æ³äºè§£æå ³ææ¯è¯¦æ çæ´å¤ä¿¡æ¯ï¼è¯·ç»§ç»é 读ä¸ä¸èã并ä¸ä¸è¦å¿è®°å¨ dotWe å代ç 并éæ¶é¢è§ã http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/f8a3a23d/doc/source/guide/set-up-env.md ---------------------------------------------------------------------- diff --git a/doc/source/guide/set-up-env.md b/doc/source/guide/set-up-env.md index 6a846b0..c450233 100644 --- a/doc/source/guide/set-up-env.md +++ b/doc/source/guide/set-up-env.md @@ -21,17 +21,18 @@ $ nvm use 6.10.0 Node.js comes with npm, which lets you install the Weex CLI. +**NOTE: ** After the `weex-toolkit`1.0.8 version, the npm-shrinkwrap.json` npm5 specification has been added to lock the package dependencies, so the npm version <5 needs to be updated by` npm i npm @latest -g` npm version, please confirm whether the version is correct before use. + Run the following command in a Terminal: ```bash $ npm install -g weex-toolkit $ weex -v - -v1.0.3 -weex-builder : v0.2.4 -weex-previewer : v1.3.4 ``` - +You can use 'update@x.x.x' command to update specify version of weex-devtool,weex-previewer,weex-builder and weexpack +``` +weex update weex-devtool@latest //latest sign means install latest version +``` **NOTE: ** If you get an error like "permission error", try installing with `sudo`. @@ -57,37 +58,42 @@ We enter the awesome-project folder and install dependencies with the following npm install ``` -Then we run `npm run dev & npm run serve` in root directory to start watch mode and static server. +Then we run `npm run serve` in root directory to start watch mode and static server. Finally, we can see the Weex page in `http://localhost:8080/index.html`. -You can modify this page in `src/foo.vue`. The code is shown below: +You can modify this page in `src/index.vue`. The code is shown below: ```html <template> - <div class="wrapper"> - <text class="weex">Hello Weex!</text> - <text class="vue">Hello Vue!</text> + <div class="wrapper" @click="update"> + <image :src="logoUrl" class="logo"></image> + <text class="title">Hello {{target}}</text> + <text class="desc">Now, let's use vue to build your weex app.</text> </div> </template> -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .weex { - font-size: 60px; - text-align: center; - color: #1B90F7; - } - .vue { - font-size: 60px; - text-align: center; - margin-top: 30px; - color: #41B883; - } +<style> + .wrapper { align-items: center; margin-top: 120px; } + .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; } + .logo { width: 360px; height: 156px; } + .desc { padding-top: 20px; color:#888; font-size: 24px;} </style> + +<script> + export default { + data: { + logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png', + target: 'World' + }, + methods: { + update: function (e) { + this.target = 'Weex' + console.log('target:', this.target) + } + } + } +</script> ``` If you're curious to learn more about technical details, continue on to the next section. And don't forget to write code at [dotWe](https://dotwe.org) and preview at anytime.
