Weex技術(shù)工具箱
教程鏈接匯總
| 技術(shù) | 教程鏈接 |
|---|---|
| HTML | http://www.w3school.com.cn/html/index.asp |
| CSS | http://www.w3school.com.cn/css/index.asp |
| SASS | https://www.sass.hk/docs/ |
| Javascript教程(w3school) | http://www.w3school.com.cn/js/ |
| Javascript教程(手冊(cè)網(wǎng)) | http://www.shouce.ren/api/view/a/13856 |
| ES6入門教程 | http://es6.ruanyifeng.com/#docs/intro |
| Babel教程 | http://www.ruanyifeng.com/blog/2016/01/babel.html |
| webpack(2.2)教程 | http://www.shouce.ren/api/view/a/13313 |
| webpack官方教程 | https://doc.webpack-china.org/guides/ |
| Vue教程 | https://cn.vuejs.org/v2/guide/ |
| vue-router2教程 | http://router.vuejs.org/zh-cn/essentials/getting-started.html |
| Weex官網(wǎng) | http://weex.apache.org/cn/guide/ |
| Weex官方Demo | https://github.com/apache/incubator-weex |
| weexpack教程(github) | https://github.com/weexteam/weex-pack |
| Weex-Toolkit | https://github.com/weexteam/weex-toolkit/blob/dev/README-zh.md |
HTML簡(jiǎn)介
HTML是用來(lái)制作網(wǎng)頁(yè)的標(biāo)記語(yǔ)言
HTML是Hypertext Markup Language的英文縮寫, 即超文本標(biāo)記語(yǔ)言
HTML語(yǔ)言是一種標(biāo)記語(yǔ)言,不需要編譯,直接由瀏 HTML語(yǔ)言是一種標(biāo)記語(yǔ)言,不需要編譯,直接由瀏覽器執(zhí)行
HTML文件是一個(gè)文本文件,包含了一些HTML元素, HTML文件是一個(gè)文本文件,包含了一些HTML元素,標(biāo)簽等.
HTML文件必須使用html或htm為文件名后綴
HTML是大小寫不敏感的,HTML與html是一樣的
HTML教程鏈接 http://www.w3school.com.cn/html/index.asp
CSS簡(jiǎn)介
CSS全稱為Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡(jiǎn)稱CSS樣式表，所以稱之為層疊樣式表（Cascading Stylesheet）簡(jiǎn)稱CSS。在網(wǎng)頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。
CSS具有對(duì)網(wǎng)頁(yè)的布局、顏色、背景、寬度、高度、字體進(jìn)行控制，讓網(wǎng)頁(yè)按您的美工設(shè)計(jì)布局的更加美觀漂亮。
CSS教程鏈接 http://www.w3school.com.cn/css/index.asp
Sass簡(jiǎn)介
Sass 是對(duì) CSS 的擴(kuò)展，讓 CSS 語(yǔ)言更強(qiáng)大、優(yōu)雅。 它允許你使用變量、嵌套規(guī)則、 mixins、導(dǎo)入等眾多功能， 并且完全兼容 CSS 語(yǔ)法。 Sass 有助于保持大型樣式表結(jié)構(gòu)良好， 同時(shí)也讓你能夠快速開始小型項(xiàng)目， 特別是在搭配 Compass 樣式庫(kù)一同使用時(shí)。
Sass教程鏈接https://www.sass.hk/docs/
Javascript簡(jiǎn)介
JavaScript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。
Javascript教程(w3school) http://www.w3school.com.cn/js/
Javascript教程(手冊(cè)網(wǎng)) http://www.shouce.ren/api/view/a/13856
HTML、CSS和JavaScript的關(guān)系
學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript語(yǔ)言。下面我們就來(lái)了解下這三門技術(shù)都是用來(lái)實(shí)現(xiàn)什么的：
- HTML是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
- CSS樣式是表現(xiàn)(外觀控制)。就像網(wǎng)頁(yè)的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來(lái)改變內(nèi)容外觀的東西稱之為表現(xiàn)。
- JavaScript是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果。如：鼠標(biāo)滑過(guò)彈出下拉菜單?；蚴髽?biāo)滑過(guò)表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換?？梢赃@么理解，有動(dòng)畫的，有交互的一般都是用JavaScript來(lái)實(shí)現(xiàn)的。
ECMAScript 6簡(jiǎn)介
ECMAScript 6.0（簡(jiǎn)稱 ES6）是 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)，是使得 JavaScript 語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。
ES6入門教程鏈接 http://es6.ruanyifeng.com/#docs/intro
Babel簡(jiǎn)介
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。
Babel教程鏈接 http://www.ruanyifeng.com/blog/2016/01/babel.html
Webpack簡(jiǎn)介
Webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載。通過(guò) loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
webpack(2.2)教程鏈接http://www.shouce.ren/api/view/a/13313
webpack官方教程鏈接:https://doc.webpack-china.org/guides/
Webpack和Grunt以及Gulp相比有什么特性
其實(shí)Webpack和另外兩個(gè)并沒(méi)有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過(guò)Webpack的優(yōu)點(diǎn)使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行類似編譯，組合，壓縮等任務(wù)的具體步驟，這個(gè)工具之后可以自動(dòng)替你完成這些任務(wù)。
Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過(guò)一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件。
Vue簡(jiǎn)介
Vue.js（讀音 /vju?/，類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)
Vue教程鏈接https://cn.vuejs.org/v2/guide/
vue-router2簡(jiǎn)介
路由設(shè)置，用于設(shè)置頁(yè)面跳轉(zhuǎn)時(shí)的路徑設(shè)置
用 Vue.js + vue-router 創(chuàng)建單頁(yè)應(yīng)用。使用 Vue.js ，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來(lái)，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們
vue-router2教程:http://router.vuejs.org/zh-cn/essentials/getting-started.html
weex簡(jiǎn)介
Weex 是一套簡(jiǎn)單易用的跨平臺(tái)開發(fā)方案，能以 web 的開發(fā)體驗(yàn)構(gòu)建高性能、可擴(kuò)展的 native 應(yīng)用，為了做到這些，Weex 與 Vue 合作，使用 Vue 作為上層框架，并遵循 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API，這樣一來(lái)，你甚至可以使用其他框架驅(qū)動(dòng) Weex，打造三端一致的 native 應(yīng)用。
Weex官網(wǎng)鏈接:http://weex.apache.org/cn/guide/
Weex官方Demo:https://github.com/apache/incubator-weex
weexpack簡(jiǎn)介
weexpack 是新一代的weex應(yīng)用工程和插件工程開發(fā)套件，是基于weex快速搭建應(yīng)用原型的利器。它能夠幫助開發(fā)者通過(guò)命令行創(chuàng)建weex應(yīng)用工程和插件工程，快速打包 weex 應(yīng)用并安裝到手機(jī)運(yùn)行，對(duì)于具有分享精神的開發(fā)者而言還能夠創(chuàng)建weex插件模版并發(fā)布插件到weex應(yīng)用市場(chǎng)。 使用weexpack 能夠方便的在在weex工程和native工程中安裝插件。
weexpack教程(github) https://github.com/weexteam/weex-pack
Weex-Toolkit簡(jiǎn)介
一個(gè) Weex 官方命令行工具，它能夠幫助進(jìn)行項(xiàng)目開發(fā)時(shí)候的預(yù)覽，調(diào)試等工作。
Weex-Toolkit官方鏈接:https://github.com/weexteam/weex-toolkit/blob/dev/README-zh.md
