初始化 Emberjs 项目

xushaojieaaa 发布于2019-08-23 17:04 / 3004人阅读

摘要：初始化一个新的项目生成项目其中用于跳过初始化项目时自带的组件。是在初始化完成之后，就进行依赖的安装。在命令行中运行之后，打开之，就能看到这就说明的项目已经成功启动。自动引入依赖包数据至此，项目的整个过程就结束了。

Ember Guide 1. 初始化一个新的项目 1.1 生成项目

ember new ember-guide --no-welcome --yarn

其中--no-welcome 用于跳过ember-cli 初始化项目时自带的 welcome 组件。--yarn 是在初始化完成之后，就进行依赖的安装。
在命令行中运行

ember s

之后，打开localhost:4200 之，就能看到

Welcome to Ember

这就说明Ember的项目已经成功启动。

1.2 配置为Pods目录

目前项采取的是Pods目录，具体的设置为：

//  ./.ember-cli
{
    "disableAnalutics": true,
    "usePods": true
}

//  ./config/environment.js
module.exports = function(environment) {
    let ENV = {
        modulePrefix: "ember-guide",
        podModulePrefix: "ember-guide/modules",
        environment,
        rootURL: "/",
        locationType: "auto",
    }
}

其中 ember-demo/modules 将在 app 文件夹下生成 modules文件夹，此为 pod 目录中的主文件夹，可自定义名称。
此后使用 ember g 命令即会在 app/modules 文件夹下生成相应的文件。

删除 app/routes 文件夹;

删除 app/controllers 文件夹;

删除 app/components 文件夹;

删除 app/models 文件夹;

删除 app/templates 文件夹;

删除 app/templates 文件夹之后，别忘记重新生成 application 路由。

1.3 安装必要的插件

使用 bootstrap v4:

ember install ember-bootstrap

利用 ember-bootstrap 的 blueprient 使用 CSS 预处理器 sass:

ember generate ember-bootstrap --preprocessor=sass

2.使用 css module:

ember install ember-css-modules ember-css-modules-sass

重启应用，即可。

// 自动引入依赖包
yarn add ember-auto-import --dev 

// mock数据
yarn add ember-cli-mirage --dev

// truth helper
yarn add ember-truth-helper --dev

mock Data

truth helper usage

至此，项目的整个 Init 过程就结束了。

Written by Frank Wang.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103772.html

Emberjs中JSONAPISerializer的常用API

摘要：默认使用，在我们的项目中也是使用所以只是涉及关于的相关内容。这样来达到前后端通信的要求。这个方法可以在中定义特定的来针对调用。同理，其他的更新删除相似至此的相关属性与已解释完成。 Ember Serializer Emberjs 默认使用 JSONAPISerializer ，在我们的项目中也是使用JSONAPISerializer.所以只是涉及关于 JSONAPISerializer...

channg 2019-08-23 18:38 评论0 收藏0
emberjs引百度地图问题

摘要：话不多说，直接上干货我们通过连接打开发现里面是真正拿到百度地图的文件的地址是这个路径于是我就在页面上直接引入改成，事情就此解决在emberjs框架中引入百度地图，看网上有道友这么解决道友文章我最近也恰好用到了这个，遇到了模板中引入引入百度地图时拿不到BMap对象的尴尬事。话不多说，直接上干货我们通过连接打开http://api.map.baidu.com/api?v=2.0发现...

Tamic 2019-08-19 17:29 评论0 收藏0
Emberjs 如何与后端服务进行交互-Store/Adapter/Serializer的作用

摘要：返回数据请求流程后端返回的数据首先也会经过上面的处理其次经过返回进将数据存储起来后返回请求数据的地方。至此一个请求后端数据的请求的流程就到此结束了。例如等以及官方推荐最少要复写的方法 Emberjs 如何与后端服务进行交互 @[toc] 一般发送请求流程首先来看这张图: showImg(https://segmentfault.com/img/bVCzJn?w=339&h=521...

HackerShell 2019-08-26 10:22 评论0 收藏0
emberjs引百度地图问题

摘要：话不多说，直接上干货我们通过连接打开发现里面是真正拿到百度地图的文件的地址是这个路径于是我就在页面上直接引入改成，事情就此解决在emberjs框架中引入百度地图，看网上有道友这么解决道友文章我最近也恰好用到了这个，遇到了模板中引入引入百度地图时拿不到BMap对象的尴尬事。话不多说，直接上干货我们通过连接打开http://api.map.baidu.com/api?v=2.0发现...

ad6623 2019-08-30 12:44 评论0 收藏0
emberjs引百度地图问题

摘要：话不多说，直接上干货我们通过连接打开发现里面是真正拿到百度地图的文件的地址是这个路径于是我就在页面上直接引入改成，事情就此解决在emberjs框架中引入百度地图，看网上有道友这么解决道友文章我最近也恰好用到了这个，遇到了模板中引入引入百度地图时拿不到BMap对象的尴尬事。话不多说，直接上干货我们通过连接打开http://api.map.baidu.com/api?v=2.0发现...

Ali_ 2019-08-01 15:02 评论0 收藏0