要使用CMIS提供的开发环境,我们首先需要安装好一些基础依赖。这些依赖虽然和具体的项目无关,但却是运行所有CMIS开发环境所必须的。请按步骤执行。
-
安装 Node.js 和 npm,要求Node.js版本为5.0.0+, npm版本为3.0.0+。安装完成后,我们的系统会增加两条可用的命令:
node
和npm
,可以通过Terminal查看其版本是否符合要求。 -
安装命令行工具。在任意目录下执行
npm i cmis-cli -g
安装 命令行工具。
在基础环境准备好了之后,需要在项目中安装具体的开发环境来支持我们的开发。具体过程如下
- 选定一个目录作为项目的根目录,进入该目录。
- 执行
npm init
,根据交互界面的提示输入一些基本信息。(也可以直接按entry键按默认情况来处理)。 - 执行
npm i cmis-env-spa --save-dev --registry=https://registry.npm.taobao.org
安装 cmis单页应用开发环境。
该过程所需的时间视当时的网络环境而定,请耐心等待,如果长时间未完成,请终止安装过程,重试一次。
- 执行
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/
即可看到效果。
以下是预览效果的截图: