Skip to content

Latest commit

 

History

History
109 lines (59 loc) · 6.16 KB

kuai_su_kai_shi.md

File metadata and controls

109 lines (59 loc) · 6.16 KB

快速开始

基础环境的安装

要使用CMIS提供的开发环境,我们首先需要安装好一些基础依赖。这些依赖虽然和具体的项目无关,但却是运行所有CMIS开发环境所必须的。请按步骤执行。

  1. 安装 Node.js 和 npm,要求Node.js版本为5.0.0+, npm版本为3.0.0+。安装完成后,我们的系统会增加两条可用的命令:nodenpm,可以通过Terminal查看其版本是否符合要求。 Node.js环境

  2. 安装命令行工具。在任意目录下执行npm i cmis-cli -g 安装 命令行工具

单页应用开发环境的安装

在基础环境准备好了之后,需要在项目中安装具体的开发环境来支持我们的开发。具体过程如下

  1. 选定一个目录作为项目的根目录,进入该目录。
  2. 执行npm init,根据交互界面的提示输入一些基本信息。(也可以直接按entry键按默认情况来处理)。
  3. 执行npm i cmis-env-spa --save-dev --registry=https://registry.npm.taobao.org 安装 cmis单页应用开发环境

该过程所需的时间视当时的网络环境而定,请耐心等待,如果长时间未完成,请终止安装过程,重试一次。

  1. 执行cmis -v查看当前安装的环境版本,如果该命令成功执行,则表明安装过程顺利完成。

项目根目录的重要性

CMIS相关的所有命令,都是以项目的根路径来作为 Current Work Directory 的。

初始化项目

为了便于代码的管理,CMIS要求 所有的源代码文件都存放在项目根目录下的src目录中。我们可以手工创建该目录,也可以执行cmis init命令来自动创建该目录。

如果选择使用 cmis init 的方式来初始化项目,除了会创建 src 目录外,还会创建其他一些文件或目录,关于这些文件的作用,我们会在后面的文档中了解到其作用,在这里暂时不用理会它们。

创建页面

页面目录

在CMIS中,为了更好地聚合资源,我们必须以目录的方式来组织页面,这样的目录被称为页面目录。同时,在默认情况下,这些页面目录必须被包含在src/pages路径下。

为了标识src/pages下的某个目录是一个页面目录,它必须拥有一个和该目录同名.html文件,这个.html文件被称作页面模板,其作用是用于存放页面的“HTML”源码

在现实的开发过程中,我们的页面必然会包含一些和当前页面相关的一些资源,如:css、js以及图片等。在CMIS中,这些资源都被组织在其对应的页面目录下的 _assets 目录中

在当前的示例中,我们暂时不会涉及和页面资源相关的内容,这些内容会放置到后续的文档中进行专门说明。

页面创建

同项目的初始化工作一样,你可以手工创建每一个页面,也可以使用CMIS提供的 cmis createpage [path] 命令来自动创建。该命令需要你指定一个 相对于项目根路径的相对路径 作为参数,该路径的 最后一部分会作为页面目录的名称,其他部分则是该页面目录所在的路径。

提示: 由于CMIS要求所有的页面目录默认情况下都必须在 src/pages 路径下,所以在执行cmis createpage [path]命令时,我们需要创建的页面目录路径通常情况下看起来都是这样的: cmis createpage src/pages/**/*

注意:cmis createpage 命令创建的是页面目录,所以路径不需要带 .html 后缀。

例如:为了创建项目的首页,需要执行:cmis createpage src/pages/index

提示:cmis createpage命令会同时创建一个 _assets目录,到目前为止,我们还不会涉及这方面的内容,所以直接忽略该目录即可。

到现在为止,我们的目录结构看起来大致上是这样:

编写页面内容

为了让页面呈现出我们想要的内容,我们需要修改页面模板,以前面的步骤中所创建的index页面为例,我们需要修改src/pages/index/index.html文件。

打开页面模板,在该文件中输入以下代码:

<h1>Hello World!</h1>

提示:如果是第一次修改,请清空该文件的内容。

指定页面访问地址(页面路由)

不同于传统的多页面应用,在单页应用中,我们的页面的访问路径并不能简单地由源码组织方式来反映出来,这时候,就需要一套独立于源码物理路径的路由方式。

在CMIS中,我们可以通过在 页面模板 头部插入 <%@route%>指令 来指定当前页面的访问路径。

最简单的情况下,<%@route%>指令可以接受一个path```属性,通过该属性,可以为当前页面指定 具体的访问路径

由于当前的示例中开发的是整个应用的首页,所以希望用户直接通过根路径就可以访问该页面,于是,我们可以在 页面模板 中插入以下代码:

<%@route path="/"%>

最终,我们的 页面模板 的源码看起来就像这样:

<%@route path="/"%>

<h1>Hello World!</h1>

编译

由于我们所编写的 页面模板 并不是一个标准的HTML文件,为了能让浏览器理解我们的意图,需要把源码编译成浏览器所能理解的格式。

执行这种编译转换是CMIS的核心工作之一,我们可以通过 cmis build 命令来执行该过程。

预览

在完成了编译之后,我们可以启动CMIS内置的 开发服务器 预览刚才所编写的页面。

通过执行 cmis start 命令,可以启动该服务器。默认情况下,会在本地 3000 端口上启动一个 http 服务。

由于刚才我们所编写的应用首页的访问路径被指定为 根路径/,所以我在浏览器中直接访问 http://localhost:3000/ 或者 http://127.0.0.1:3000/ 即可看到效果。

以下是预览效果的截图: