一步步编写avalon组件01：弹出层组件

avalon2已经稳定下来，是时候教大家如何使用组件这个高级功能了。

组件是我们实现叠积木开发的关键。

avalon2实现一个组件非常轻松，并且如何操作这个组件也比以前的avalon2，还是react, angular轻松多了，不需要flux这样奇怪的额外设施。

avalon2的组件包含三部分，以经典的行为结构样式相分离。通常我们命名为index.js, template.html, style.scss。

比如我们开发一个弹出层组件（有遮罩的那种），其目录结构就是如下。

modal----|index.js----|template.html----|style.scss

\s*
弹窗的内容

 弹窗的内容 弹窗的内容结束! 只支持现代浏览器(IE9+) 弹窗的内容 弹窗的内容 弹窗的内容结束! */

})

module.exports = {
entry: {
index: './main'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
libraryTarget: 'umd',
library: 'avalon'
}, //页面引用的文件
plugins: [
new webpack.BannerPlugin('弹出层组件 by 司徒正美\n' + api)
],
module: {
loaders: [
//ExtractTextPlugin.extract('style-loader', 'css-loader','sass-loader')
//http://react-china.org/t/webpack-extracttextplugin-autoprefixer/1922/4
//http://stackoverflow.com/questions/34639720/webpack-font-include-issue
// https://github.com/b82/webpack-basic-starter/blob/master/webpack.config.js
{test: /.scss$/, loader:'style!css!sass',exclude: /node_modules/},
{test: /.(ttf|eot|svg|woff2?)((\?|# )[^\'\"]+)?$/, loader: 'url-loader'}

    ]},resolve: {    extensions: ['.js', '', '.css']}

}

我们执行webpack命令，它就合并成一个文件，放在dist目录下，但有时你死活装不上node-sass什么，搞不定SASS的编译，也没问题，可以koala编译好，直接在index.js中引用纯CSS文件。最后建立一个page.html文件，欣赏一下我们的劳动成果：        modal          弹窗的内容          弹窗的内容          弹窗的内容结束!    显示弹出大家可以到这里下载到此工程#avalonjs#

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！