联系人

nemo脚手架种子工程整体框架说明

项目文件夹说明

config

存放webpack打包配置文件

src

源码

src/base

base 文件夹存放的是整个项目通用的组件库，比如：reset、导航、底部、弹窗、气泡、图标、表单元素等， 每个组件按文件夹存放，这里组件的样式都引入到外层的 css/base.css 中， 组件中的index.js不引入样式

src/components

这里存放的是整个项目公用的组件库，样式不统一打包，按需打包到各个项目的样式文件中

每个组件按文件夹存放，样式引入到组件中的 index.js 中， 并且最终汇总到 components/index.js 中，由这个文件统一 export 到项目中用。

src/projects

这里存放着各个子项目（比如：‘社区’为整个项目，‘问答’、‘专栏’、‘个人中心’则为其子项目）的代码，按项目名存放。

子项目文件夹说明，以专栏为例 column

components

项目中公用的组件代码，与最外层的 components 的规则一致

pages

各个页面的代码，按文件夹存放，文件夹名对应页面的名字。

各个页面文件夹中都有个 index.js ，在这里把当前页面所引用的样式都汇总在这里，具体见文件代码。

样式文件打包说明

除了base 文件夹中的样式统一打包进 css/base.css 中，第三方css引入在template文件夹下的html中， 其他的样式文件均按需加载，最终汇入子项目总的css中

脚手架命令行

• nm init [projectName] 初始化项目，比如‘云+社区’就是整个项目

• nm sub [subProjectName] 在project中新建一个子项目，比如‘问答’就是‘云+社区’下的子项目

• nm page [subProjectName.pageName] 在[subProjectName]子项目下新建一个页面组件pageName，比如：nm page ask.home,就是在‘问答’下新建主页home

• nm com [subProjectName.componentName] 在[subProjectName]子项目下新建一个通用组件componentName，比如：nm com ask.toast,就是在‘问答’下新建通用组件toast

• nm com base.[componentName] 在base文件夹下新建一个组件，base文件夹下存放整个项目通用的组件，比如‘头部’和‘底部’,所有的组件样式汇总到base.css,所有的子项目 都会引用base.css

• nm com com.[componentName] 在component文件夹下新建一个组件，component文件夹下存放整个项目公用的组件，样式不做汇总，子项目按需加载，最终打包进子项目的文件中

• nm start 运行整个项目

• nm start [subProjectName] 启动指定的子项目，仅仅启动一个

• nm start [subProjectName.subProjectName] 启动指定的子项目，子项目直接通过“.”链接

• nm build [subProjectName] 打包子项目[subProjectName]，比如：nm build ask,就是打包‘问答’这个子项目

开始

方式一：npm i -g nemo-cli-c

• 运行npm i -g nemo-cli-c 即可

方式二：

• 选择一个非项目文件夹存放nemo的文件，然后运行git clone

• npm i 按照nemo的npm依赖

• npm link 至此，如果一切顺利，便可以使用nemo进行开发啦

• 去到想要创建项目的文件夹，然后运行nm init [projectName] 初始化一个项目，这里需要的时间会比较久，因为在初始化项目的时候，会将npm包都安装完成

• cd [projectName] 进入创建的项目中

• nm sub [subProjectName] 在project中新建一个子项目，比如‘问答’就是‘云+社区’下的子项目,如果没有此步骤，webpack缺乏entry

• nm start 运行整个项目，会自动打开http://localhost:6060/ ，然后贴上我们希望访问的子项目入口文件，比如：访问‘问答页面’， 即：http://localhost:6060/ask.html

• nm start [subProjectName] 启动指定的子项目，仅仅启动一个

• nm start [subProjectName.subProjectName] 启动指定的子项目，子项目直接通过“.”链接

小tips

• 从base中引用组件时，无需长长的路径选择符，nemo已经将base的路径映射给变量BaseCom，因此可以这样使用： import {Basecom1} from 'BaseCom'

• 从最外层components中引用组件时，也无需长长的路径选择符，nemo已经将components的路径映射给变量Com，因此可以这样使用： import {ComCom1} from 'Com'

• 脚手架已经支持svg换色本地预览，预发同之前xx.svg?fill=#ddd;如果发现报错，可以检查svg文件的代码，将style="fill:#ddd" 的语法改成svg元素的属性写法， fill = "#ddd"