pad*_*man 10 ember.js ember-cli
我正在尝试使用ember-cli来获得一个ember项目,但是我之前依靠rails和资源管道来编译我以前的项目所有的js和(s)css.
我承认对js构建工具的理解很少,如果问题是基本的,那么道歉:我怎样才能看到构建中正在编译/包含哪些依赖项？具体来说,我想在我的项目中包括zurb-foundation和ember-leaflet.我不确定它们是否在那里(至少传单没有出现在项目中 - 使用了一个适用于rails和rail-eak的基本示例).
文件(ember-leaflet等)位于项目的供应商目录中,并通过bower install放置在那里(我假设？); 我是否必须手动将它们包含在root bower.json文件中(目前它们不是); bower.json中的顺序重要吗？
提前致谢.
DJ
the*_*rnd 11
经过一些挖掘和大量的阅读后,我在这里找到了解决方案并得到了ember-leaflet.
1.)下载libs
bower install --save leaflet
bower install --save ember-leaflet
注意:下载传单可能不是必要的,因为ember-leaflet似乎包含它(leaflet-dist).这是我手动做了几次的部分,所以你可能有也可能没有vendor/leaflet-dist.只需相应改变.
2.)配置构建资产
在module.exports行之前添加Brocfile.js中的导入行
app.import('vendor/leaflet-dist/leaflet-src.js')
app.import('vendor/leaflet-dist/leaflet.css')
app.import('vendor/ember-leaflet/dist/ember-leaflet.js')
module.exports = app.toTree();
3)使Ember(.jshintrc)知道Leaflet和EmberLeaflet
{
"predef": {
...
"L": true,
"EmberLeaflet": true
}
...
}
4)创建一个视图
export default EmberLeaflet.MapView.extend({
classNames : ['ember-leaflet-map']
});
5)使用视图创建模板(其中视图名称对应于文件名,这里是views/mapview.js)
<div id="map">
{{view 'mapview'}}
</div>
6)检查/添加供应商样式表到app/index.html(应该与最新版本的ember-cli一起出现)
<head>
...
<link rel="stylesheet" href="assets/vendor.css">
</head>
7)运行Ember
ember server
8)奖金:如果您使用的是Twitter Bootstrap 3,这里的css我必须添加到app/styles/app.css(可能会简化)
html,
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 20px;
height: 100%;
}
.page-content {
padding: 40px 15px;
height: 100%;
}
.row {
margin-bottom: 1.5em;
}
#map {
height: 100%;
}
.ember-leaflet-map {
height: 100%;
}
body > .ember-view {
height: 100%;
}
| 归档时间： |
|
| 查看次数： |
2207 次 |
| 最近记录： |