We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
最近找了几个模块化的方案，posthtml还不是很成熟，css module需要和react一起比较好用，于是尝试了下polymer。
polymer是基于web component规范的，hello-world-polymer可以让我们快速的熟悉polymer。
polymer模块html，css，js都是写一起的，hello-word.html代码如下
hello-word.html
<!-- Imports polymer --> <link rel="import" href="../../polymer/polymer.html"> <!-- Defines element markup --> <dom-module id="hello-world"> <template> <p>Hello <strong>{{who}}</strong> :)</p> </template> </dom-module> <!-- Registers custom element --> <script> Polymer({ is: 'hello-world', properties: { who: { type: String, value: 'World' } } }); </script>
定义好模块后，只要在index.html文件引入模块，然后用<hello-world>标签就可以了，这个标签名跟模块里的id是一致的。
index.html
<hello-world>
<!doctype html> <html> <head> <meta charset="utf-8"> <title><hello-world></title> <!-- Imports polyfill --> <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Imports custom element --> <link rel="import" href="build/hello-world.html"> </head> <body> <!-- Runs custom element --> <hello-world who="world"></hello-world> </body> </html>
多模块也是没问题的，我们新建一个hello-module.html，并且给她一点样式
hello-module.html
<!-- Imports polymer --> <link rel="import" href="../../polymer/polymer.html"> <!-- Defines element markup --> <dom-module id="hello-module"> <style> p{ color: red; display: flex; } strong{ color: black; } </style> <template> <p>Hello <strong>{{who}}</strong> :)</p> </template> </dom-module> <!-- Registers custom element --> <script> Polymer({ is: 'hello-module', properties: { who: { type: String, value: 'Module' } } }); </script>
然后在index.html引入
<!doctype html> <html> <head> <meta charset="utf-8"> <title><hello-world></title> <!-- Imports polyfill --> <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Imports custom element --> <link rel="import" href="build/hello-module.html"> <link rel="import" href="build/hello-world.html"> </head> <body> <!-- Runs custom element --> <hello-module who="module"></hello-module> <hello-world who="world"></hello-world> </body> </html>
浏览器显示是这样的，polymer已经帮我们加好命名空间，样式是不会相互影响的。
但是一些css3属性怎么办呢，我们还需要autoprefixer或者cssnext。需要三个插件支持，在命令行输入
npm i --save gulp-posthtml posthtml-postcss postcss-cssnext
然后修改gulpfile.js文件
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就会实时帮我们编译了。生成的模块代码如下
gulp
<!-- Imports polymer --> <link rel="import" href="../../polymer/polymer.html"> <!-- Defines element markup --> <dom-module id="hello-module"> <style> p{ color: red; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } strong{ color: black; } </style> <template> <p>Hello <strong>{{who}}</strong> :)</p> </template> </dom-module> <!-- Registers custom element --> <script> Polymer({ is: 'hello-module', properties: { who: { type: String, value: 'Module' } } }); </script>
这样浏览器就支持了，测试了一下，polymer支持安卓4.1，如果测试没什么问题，就可以愉快的用上了。
The text was updated successfully, but these errors were encountered:
奇舞团仿Polymer造了个轮子Novajs，能兼容安卓2.3的。
Sorry, something went wrong.
@wonsikin 赞
@zhouwenbin 以前你的博客里的文章去哪里看呢，网站挂了？
@git-lt 空间过期就没续费了
No branches or pull requests
最近找了几个模块化的方案，posthtml还不是很成熟，css module需要和react一起比较好用，于是尝试了下polymer。
polymer是基于web component规范的，hello-world-polymer可以让我们快速的熟悉polymer。
polymer模块html，css，js都是写一起的，
hello-word.html代码如下定义好模块后，只要在
index.html文件引入模块，然后用<hello-world>标签就可以了，这个标签名跟模块里的id是一致的。多模块也是没问题的，我们新建一个
hello-module.html，并且给她一点样式然后在
index.html引入浏览器显示是这样的，polymer已经帮我们加好命名空间，样式是不会相互影响的。
但是一些css3属性怎么办呢，我们还需要autoprefixer或者cssnext。需要三个插件支持，在命令行输入
然后修改
gulpfile.js文件在命令行输入
gulp就会实时帮我们编译了。生成的模块代码如下这样浏览器就支持了，测试了一下，polymer支持安卓4.1，如果测试没什么问题，就可以愉快的用上了。
The text was updated successfully, but these errors were encountered: