快速开始

使用 npm 初始化

npm init @cutting-mat

交互式 CLI 界面，支持三种模板选择：

template-element-ui：基于 Element-UI 的 PC 端项目模板
template-element-plus：基于 Element-Plus 的移动端的项目模板（完善中...）
template-vant：基于 Vant4 的移动端的项目模板（完善中...）
template-electron：基于 Electron 的客户端项目模板（完善中...）

拉取初始化模板

或者从 git repository 拉取项目初始模板。

git clone https://github.com/cutting-mat/template-element-ui.git

git clone https://github.com/cutting-mat/template-element-plus.git

git clone https://github.com/cutting-mat/template-vant.git

开发服务

安装 npm 依赖，并运行开发服务。

npm i               // 安装依赖
npm run serve       // 启动开发服务
npm run build       // 构建生产环境代码

字体图标

CuttingMat 使用 iconfontopen in new window 字体图标库。

内置字体文件目录：@/core/assets/font/。

图标列表详见字体图标。

三方 UI 库

template-element-uiopen in new window 使用 Element-UI 组件库，官方文档open in new window。

template-element-plusopen in new window 使用 Element-Plus 组件库，官方文档open in new window。

template-vantopen in new window 使用 Vant4 组件库，官方文档open in new window。

新增一个模块

CuttingMat 是模块化的组织思路，API、页面、组件、静态资源、路由都包含在模块中，所有开发的第一步要从新增模块开始。为应用新增一个模块分三步：

创建模块文件

为便于快速创建新模块，项目内置了模块模板（@/__template/），只需复制并重命名就完成了新模块的文件初始化，比如我们复制出一个@/myFirstMoudle/文件夹。

配置模块路由

@/myFirstMoudle/index.js就是新模块的路由，初始状态已经注册了模块主页（Index.vue）和一个空白页面（List.vue），只需要根据实际业务修改名称：

export default [{
    // path: '/template',
+   path: '/myFirstMoudle',
    // name: '模块模板',
+   name: '新模块',
    component: (resolve) => require(['./views/Index.vue'], resolve),
    // redirect: '/template/list',
+   redirect: '/myFirstMoudle/list',
    children: [{
        path: 'list',
        // name: '列表',
+       name: '新模块列表',
        component: (resolve) => require(['./views/List.vue'], resolve)
    }]
}]

注册模块路由

然后打开项目的路由配置文件（@/route.config.js），将新模块注册到主路由中：

...
// 主模块
import main from '@/main/index'

// 业务模块
import system from '@/system'
import user from '@/user'
+ import myFirstMoudle from '@/myFirstMoudle'

// 主路由
export const MainRoute = [Object.assign({}, main[0], {
    children: [
+       ...myFirstMoudle,
        ...system,
        ...user,
    ]
})];

这样新模块就创建完成了，启动开发服务，新路由（ http://localhost:8080/#/myFirstMoudle ）已经可以访问。

模块包含自己的 API、静态资源、组件、页面和路由，如果你熟悉 Vue 开发，接下来该如何继续就很简单了。

下一步

了解框架设计思路可以参考【指南】部分。

了解框架内置功能可以访问【功能】查看内置功能。

# 快速开始

# 使用 npm 初始化

# 拉取初始化模板

# 开发服务

# 字体图标

# 三方 UI 库

# 新增一个模块

# 下一步