polymer初探_html/css

polymer是基于web component規范的，hello-world-polymer可以讓我們快速的熟悉polymer。

polymer模塊html，css，js都是寫一起的， hello-word.html 代碼如下

定義好模塊后，只要在 index.html 文件引入模塊，然后用 標簽就可以了，這個標簽名跟模塊里的id是一致的。

多模塊也是沒問題的，我們新建一個 hello-module.html ，并且給她一點樣式

然后在 index.html 引入

瀏覽器顯示是這樣的，polymer已經幫我們加好命名空間，樣式是不會相互影響的。

但是一些css3屬性怎么辦呢，我們還需要autoprefixer或者cssnext。需要三個插件支持，在命令行輸入

npm i --save gulp-posthtml posthtml-postcss postcss-cssnext

然后修改 gulpfile.js 文件

var gulp = require('gulp'), postcssPlugins = [require('postcss-cssnext')({ browsers: ['last 10 versions'] })]gulp.task('html', function() { var posthtml = require('gulp-posthtml'); return gulp.src('modules/*.html') .pipe(posthtml([ require('posthtml-postcss')(postcssPlugins) ]/*, options */)) .pipe(gulp.dest('build/'));});gulp.task('watch', function() { gulp.watch("modules/**.html",["html"]);});gulp.task('default', ['html', 'watch']);

在命令行輸入 gulp 就會實時幫我們編譯了。生成的模塊代碼如下

這樣瀏覽器就支持了，測試了一下，polymer支持安卓4.1，如果測試沒什么問題，就可以愉快的用上了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com