简介
@cdp/mobile 是一个易于使用的移动端原生开发框架，使用 npm 包管理方式，旨在提高开发效率和应用性能。
安装
在命令行输入以下命令进行安装：
npm install @cdp/mobile --save
使用
初始化项目
在项目的根目录下添加一个
.npmrc文件，输入以下内容：@cdp:registry=https://npm.pkg.github.com
在命令行中输入以下命令进行初始化：
npm init @cdp/mobile
此时会弹出配置界面，根据需要填写相关信息。
安装依赖：
npm install
创建页面
进入项目的
src/pages目录，执行以下命令：cdp create <page-name>
自动生成页面的代码，包括 HTML、CSS 和 JS 文件。
在
app.json文件中添加页面的路径：{ "pages": [ "pages/<page-name>/<page-name>" ] }
配置
在项目的根目录下创建一个 cdp.config.js 文件，配置相关选项。以下是一些常见的选项：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
output |
string |
"./dist" |
输出目录路径 |
sourceMap |
bool |
true |
是否生成 sourceMap 文件 |
library |
string |
undefined |
是否将头部注释中的名字作为全局变量导出 |
externals |
array |
[] |
排除的依赖包列表 |
minimize |
bool |
process.env.NODE_ENV === 'production' |
是否压缩代码 |
minimizerClass |
string |
"uglifyjs" |
压缩器的名称。可选项包括 "uglifyjs" 和 "terser" |
以下是一个示例代码：
module.exports = {
output: "./wwwroot",
sourceMap: true,
library: "myLib",
externals: [],
minimize: true,
minimizerClass: "uglifyjs",
};示例代码
使用 @cdp/mobile 创建一个简单的计时器页面。
HTML
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- -------------------------------------------------------------
------------------
----- ---------------- -------------------
-------
------
---- --------------
---- ---------------------------
---- -------------- -----------------------
---- -------------- -----------------------
---- -------------- ----------------------
------
------- --------------------------
-------
-------CSS
-- -------------------- ---- -------
------ -
-------- -----
--------------- -------
------------ -------
---------------- -------
------- ------
---------- -----
-
------- -
------ ------
------- -----
----------- -----
------------ -----
----------- -------
----------------- --------
------ ------
----------- - - ---- ------- -- -- -----
-------------- -----
-
------------------
------------------
---------------- -
----------------- --------
-JS
-- -------------------- ---- -------
------ - ---- - ---- --------------
------ ------ ---- ---------
----- --------- ------- ---- -
------------- -
--------
--------- - --
--------------- - -----
--------------------- - ---------------------------------
--------------------- - ---------------------------------
-------------------- - --------------------------------
-
-------- -
---------------
-------------- - -------------------------
----------------- - ------------------------------
----------------- - ------------------------------
---------------- - -----------------------------
------------------------------------------- -----------------------
------------------------------------------- -----------------------
------------------------------------------ ----------------------
-
--------- -
---------------------------------------------- -----------------------
---------------------------------------------- -----------------------
--------------------------------------------- ----------------------
----------------
-
------------------ -
-- ---------------- --- ----- -
-------
-
-------------- - ---------
--------------- - -------------- -- -
----- -------- - -----------------------------------------------
--------- - ---------------------------------
------------------------ - ----------
-- ------
-
------------------ -
-------------------------------
--------------- - -----
-
----------------- -
-------------------------------
--------------- - -----
--------- - --
------------------------ - --
-
-
-------------------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668981e8991b448e2c6f