m8-framework-mcp 1.0.0 → 1.0.1

package/docs/m8mpdoc-develop/000-/346/225/264/344/275/223/350/256/276/350/256/241/004-/345/267/245/347/250/213/350/207/252/345/256/232/344/271/211/351/205/215/347/275/256.md

@@ -1,97 +0,0 @@
-# 工程自定义配置
-
-## 前言
-
-移动前端跨端框架支持工程自定义webpack配置，以满足不同工程的需求。
-
-## 配置文件位置
-
-```
-ejs.m8.mobileframe
-    ├── build                       devServer 与 webpack 构建配置
-    │   ├── base.config.js          用于配置调试、生产环境是否开启showcase
-    │   ├── dev.server.js           跨端框架devServer配置
-    │   ├── index.js                自定义webpack配置入口
-```
-
-## base.config.js
-
-```js
-module.exports = {
-    isDevBuildShowcase: 0,
-    isProBuildShowcase: 0
-};
-```
-
-用于配置调试、生产环境是否开启showcase。
-
-注意：修改后需要重启服务或重新构建。仅在H5端生效。
-
-## dev.server.js
-
-```js
-module.exports = {
-    openPage: process.env.devName ? process.env.devName : '',
-    // h5环境强制打开浏览器
-    open: process.env.UNI_PLATFORM === 'h5',
-    // 设置服务器的主机号，默认是 localhost
-    host: '0.0.0.0',
-    // 端口号，被占用的话会自动选择别的端口
-    port: '8080',
-    // 是否实时刷新
-    inline: true,
-    // 是否启用webpack的热模块替换功能
-    hot: true,
-    // 是否启用 gzip 压缩
-    compress: true,
-    overlay: true,
-    // 去除dev下进度输出信息
-    progress: false,
-    // 是否现实捆绑包中的错误
-    stats: 'errors-only',
-    // 代理，支持 http-proxy-middleware 所有配置
-    // 此配置会与Config.devServerProxy进行合并
-    proxy: null,
-    // 是否开启https服务，浏览器中不在localhost下测试百度地图组件时需要开启
-    https: false
-};
-```
-
-跨端框架devServer配置。
-
-注意：修改后需要重启服务或重新构建。
-
-## index.js
-
-```js
-const baseConfig = require('./base.conf');
-const devServer = require('./dev.server');
-// 自定义 Webpack 配置
-const webpackChain = () => {};
-// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
-const transpileDependencies = [];
-
-
-module.exports = {
-    baseConfig,
-    devServer,
-    webpackChain,
-    transpileDependencies
-};
-```
-
-自定义webpack配置入口。
-
-### webpackChain
-
-跨端框架会在自己的webpack配置之后调用此配置。
-
-webpackChain配置方式参考：[https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7](https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7)
-
-### transpileDependencies
-
-`v8.3.9`新增。跨端框架会与自己的babel配置进行合并。
-
-transpileDependencies配置方式参考：[https://cli.vuejs.org/zh/config/#transpiledependencies](https://cli.vuejs.org/zh/config/#transpiledependencies)
-
-注意：修改后需要重启服务或重新构建。

package/docs/m8mpdoc-develop/0001-/345/211/215/346/234/237/345/207/206/345/244/207/000-/347/216/257/345/242/203/345/207/206/345/244/207.md

@@ -1,186 +0,0 @@
-# 环境准备
-
-::: ifdef M83
-
-## 环境搭建
-
-### 安装 Node 环境
-
-下载并安装 Node.js：[下载](https://nodejs.org/dist/v16.16.0/ "下载")
-
-根据当前系统，选择安装文件，例如：
-
-Windows 64位： `node-v16.16.0-x64.msi`
-
-macOS： `node-v16.16.0-pkg`
-
-因提供的项目模板均依赖于 npm（全称 Node Package Manager，即“node 包管理器”），所以需要用到 Node。
-请下载 Node v16 版本。
-
-::: endif
-
-::: ifdef M84
-开始开发之前，请确认本地环境中安装好了 `nodejs` 的环境和 `git` 。
-
-## nodejs 环境安装
-
-### 通过Node版本管理器安装
-
-随着开发的进行，不同的项目中可能会有不同 nodejs 版本的要求，因此推荐使用 nvm 来安装和管理 nodejs。
-
-#### windows
-
-大部分人的操作系统是 Windows，而 Windows 下安装 nodejs 推荐使用 nvm 安装, nvm 可以便捷的安装多个版本的 nodejs 并支持快速切换当前使用的 nodejs 版本。
-
-**安装 nvm**
-
-可自行从 [https://github.com/coreybutler/nvm-windows](https://github.com/coreybutler/nvm-windows) 下载。
-
-安装完成后可使用 nvm 来安装和管理 nodejs.
-
-**设置国内下载镜像**
-
-在 cmd 或者 powershell 中使用如下代码设置即可
-
-```sh
-nvm node_mirror  https://npmmirror.com/mirrors/node/
-nvm npm_mirror https://npmmirror.com/mirrors/npm/
-```
-
-这样可以从国内地址开始下载，速度更快更稳定。
-
-**安装特定版本的 nodejs**
-
-对于 nodejs 的安装，正常情况下都是安装其 LTS 版本，也就是版本号首位是偶数的版本，如 22.x.x, 20.x.x, 18.x.x 等。
-
-M8.4 框架中使用推荐的nodejs版本为 22.x.x，以安装 22.20.0 为例:
-
-```sh
-nvm install 22.20.0
-
-# 查看已经安装的nodejs版本
-nvm ls
-
-# 切换并使用 nodejs 版本
-nvm use xxx
-```
-
-#### Mac 和 Linux
-
-mac 和 Linux 系统也可以使用 nvm 来安装 nodejs，你可以从此处 [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm) 获取安装步骤和文件
-
-在设置国内下载镜像时，mac 和 Linux 系统的设置方式和 windows 略有不同，这里使用的是环境变量，具体设置方式如下：
-
-```sh
-# 设置环境变量
-export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node
-# 进行安装
-nvm install 22.20.0
-```
-
-后续步骤和windows相同，在安装完成后参考 windows 的设置即可。
-
-如果你是M系列设备，且需要使用 v16 以下版本的 nodejs, nvm 上的支持可能有问题，解决方案参考 [https://github.com/nvm-sh/nvm?tab=readme-ov-file#macos-troubleshooting](https://github.com/nvm-sh/nvm?tab=readme-ov-file#macos-troubleshooting)
-
-### 直接安装 nodejs
-
-如果你不涉及多个版本的 nodejs，也可以直接从 [https://nodejs.org/](https://nodejs.org/) 下载安装包双击进行安装，此操作各个系统基本均是一致的，不再展开描述。
-
-注意需下载 LTS 的版本，如 22.x.x, 20.x.x, 18.x.x 等。
-
-### nrm 安装
-
-nrm 是一个可以管理和快速切换 npm 安装源的管理工具。 建议安装 nrm 来管理源，常用命令如下：
-
-```sh
-# 安装
-npm install -g nrm  --registry=https://registry.npmmirror.com
-# 查看可用
-nrm ls
-# 测试速度
-nrm test
-# 添加新的源
-nrm add [名称] [地址]
-# 切换源
-nrm use [名称]
-```
-
-::: endif
-
-
-###  **注意事项**
-
-#### npm仓库
-
-M8移动前端跨端框架使用的使用公司的私有化npm仓库，npm代码不暴露在公网上。
-
-框架通过工程下的`.npmrc`文件指定npm仓库地址，开发人员无需特别关注使用的仓库源。
-
-框架初始化npm install时，请确保网络处于公司内网，能够访问到[公司npm仓库](http://192.168.0.99:8081/nexus/)
-
-### 安裝开发工具
-
-下载并安装开发工具 VSCode（全称 Visual Studio Code）：[下载](https://code.visualstudio.com/download "下载")
-
-> 需以管理员权限安装VSCode，否则在项目初始化时会提示 `EPOINT TOOLS` 无权限配置开发环境。
-
-#### FAQ: npm install 依赖安装常见问题
-
-[FAQ文档](http://app.epoint.com.cn/m8mpdoc/?file=014-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/install)
-
-
-### 可选
-
-::: ifdef M83
-#### 使用 pnpm
-
-`pnpm` 是一款包管理工具，可以替代`npm`、`yarn`。对于开发来说，我们可以使用`pnpm`来安装依赖，提升重复安装依赖时的安装速度，提升开发效率。
-
-##### 前置条件
-由于 `pnpm` 安装对 `NodeJS` 有版本要求，同时 M8移动前端框架也对 `Nodejs` 有版本要求，所以使用 `pnpm` 需要注意以下前置条件：
-
-- `pnpm` 版本指定为 `v7.13.2`;
-
-- `NodeJS` 版本 >= `v14.6`;
-
-##### 全局安装 `pnpm`：
-
-```bash
-npm install -g pnpm@7.13.2
-```
-::: endif
-
-::: ifdef M84
-
-### 安装 pnpm
-
-pnpm 是一个新的包管理器，其可以在电脑上的一个位置安装依赖，在使用的地方使用软连接，从而大幅提升安装速度并节约本地磁盘的占用，具体可参阅 [pnpm](https://pnpm.io/zh/)
-
-在已经具备node的环境下，直接将 pnpm 当作一个npm包安装即可：
-
-```sh
-# 安装 目前推荐使用 v10 版本
-npm install -g pnpm@10
-```
-
-pnpm 的常规使用基本上和 npm 一样，将 npm 替换为 pnpm 即可，如：
-
-```sh
-# 运行定义好的 sctipts
-pnpm run xxx
-# 安装依赖
-pnpm install xxx
-# 安装依赖（作为开发环境的依赖）
-pnpm install xxx -D
-```
-::: endif
-
-##### 使用 `pnpm` 安装依赖：
-
-在 M8移动前端框架工程目录下，使用 `pnpm install` 代替 `npm install` 安装依赖。
-
-```bash
-pnpm install
-```
-
-安装后，仍然可以继续使用 `npm` 进行项目开发，例如 `npm run dev`、`npm run build`。同时不影响`VScode 开发插件` 的使用。

package/docs/m8mpdoc-develop/0001-/345/211/215/346/234/237/345/207/206/345/244/207/001-/345/237/272/347/241/200/350/257/255/346/263/225.md

@@ -1,218 +0,0 @@
-# 基础语法
-
-<small class="text-muted">维护人：吴松泽</small>
-
-#### 阅读本教程前，您需要了解的知识：
-
--   HTML
--   CSS
--   JavaScript
-
-### Vue 基础语法
-
-`Vue`（发音为/vjuː/，类似于 view）是用于构建用户界面的渐进式框架。核心库只关注视图层，并且很容易与其他库或现有项目进行集成。
-
-M8 移动前端框架基于`Vue`构建，完整文档请参考[Vue 官方文档](https://cn.vuejs.org/v2/guide/index.html "Vue官方文档")
-
-基础的`Vue`语法需要掌握：
-
-#### 声明式渲染
-
-Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
-
-View 层 - HTML 代码如下：
-
-```html
-<div id="app">
-    {{ message }}
-</div>
-```
-
-Model 层 - JavaScript 代码如下：
-
-```js
-var app = new Vue({
-    el: "#app",
-    data() {
-        return {
-            message: "Hello Vue!",
-        };
-    },
-});
-```
-
-[![Edit silent-hooks-51628](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/silent-hooks-51628?fontsize=14&hidenavigation=1&theme=dark&file=/0-1.1数据绑定.html&initialpath=0-1.1数据绑定.html)
-
-以上实例中 `{{message}}` 会根据`data`中的`message`改变而改变。
-
-#### 除了文本插值，我们还可以像这样来绑定元素 attribute：
-
-HTML 代码：
-
-```html
-<div id="app-2">
-    <span v-bind:title="message">
-        鼠标悬停几秒钟查看此处动态绑定的提示信息！
-    </span>
-</div>
-```
-
-JS 代码：
-
-```js
-var app2 = new Vue({
-    el: "#app-2",
-    data() {
-        return {
-            message: "页面加载于 " + new Date().toLocaleString(),
-        };
-    },
-});
-```
-
-`v-bind` attribute 被称为**指令**。指令带有前缀 `v-`，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 属性 和 Vue 实例的 message 保持一致”。
-
-<iframe
-     src="https://codesandbox.io/embed/silent-hooks-51628?fontsize=14&hidenavigation=1&file=/0-1.2绑定元素.html&initialpath=0-1.2绑定元素.html&theme=dark&view=preview&hidedevtools=1&codemirror=1"
-     style="width:50%; height:300px; border:0; border-radius: 4px; overflow:hidden;"
-     title="silent-hooks-51628"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
-
-#### 条件与循环
-
-控制切换一个元素是否显示：
-
-```html
-<div id="app-3">
-    <p v-if="seen">现在你看到我了</p>
-</div>
-```
-
-```js
-var app3 = new Vue({
-    el: "#app-3",
-    data() {
-        return {
-            seen: true,
-        };
-    },
-});
-```
-
-<iframe
-     src="https://codesandbox.io/embed/silent-hooks-51628?fontsize=14&hidenavigation=1&file=/0-2.1条件.html&initialpath=0-2.1条件.html&theme=dark&view=preview&codemirror=1"
-     style="width:50%; height:300px; border:0; border-radius: 4px; overflow:hidden;"
-     title="silent-hooks-51628"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
-
-可以在上方的 `Console` 控制台输入 `app3.seen = false`，你会发现显示的消息消失了。
-
-还有其它很多指令，每个都有特殊的功能。例如，`v-for` 指令可以绑定数组的数据来渲染一个项目列表：
-
-```html
-<div id="app-4">
-    <ol>
-        <li v-for="todo in todos">
-            {{ todo.text }}
-        </li>
-    </ol>
-</div>
-```
-
-```js
-var app4 = new Vue({
-    el: "#app-4",
-    data() {
-        return {
-            todos: [
-                { text: "学习 JavaScript" },
-                { text: "学习 Vue" },
-                { text: "整个M8项目" },
-            ],
-        };
-    },
-});
-```
-
-<iframe
-     src="https://codesandbox.io/embed/silent-hooks-51628?fontsize=14&hidenavigation=1&file=/0-2.2循环.html&initialpath=0-2.2循环.html&theme=dark&view=preview&codemirror=1"
-     style="width:50%; height:300px; border:0; border-radius: 4px; overflow:hidden;"
-     title="silent-hooks-51628"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
-
-可以在上方的 `Console` 控制台里，输入 `app4.todos.push({ text: '新项目' })`，你会发现列表最后添加了一个新项目。
-
-#### 处理用户输入
-
-为了让用户和你的应用进行交互，我们可以用 `v-on` 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
-
-```html
-<div id="app-5">
-    <p>{{ message }}</p>
-    <button v-on:click="reverseMessage">反转消息</button>
-</div>
-```
-
-```js
-var app5 = new Vue({
-    el: "#app-5",
-    data() {
-        return {
-            message: "Hello Vue!",
-        };
-    },
-    methods: {
-        reverseMessage: function () {
-            this.message = this.message.split("").reverse().join("");
-        },
-    },
-});
-```
-
-<iframe
-     src="https://codesandbox.io/embed/silent-hooks-51628?fontsize=14&hidenavigation=1&file=/0-3事件.html&initialpath=0-3事件.html&theme=dark&view=preview&codemirror=1&hidedevtools=1"
-     style="width:50%; height:300px; border:0; border-radius: 4px; overflow:hidden;"
-     title="silent-hooks-51628"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
-
-注意在 `reverseMessage` 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可
-
-#### 双向数据绑定
-
-Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
-
-```html
-<div id="app-6">
-    <p>{{ message }}</p>
-    <input v-model="message" />
-</div>
-```
-
-```js
-var app6 = new Vue({
-    el: "#app-6",
-    data: {
-        message: "Hello Vue!",
-    },
-});
-```
-
-<iframe
-     src="https://codesandbox.io/embed/silent-hooks-51628?fontsize=14&hidenavigation=1&file=/0-3.1双向绑定.html&initialpath=0-3.1双向绑定.html&theme=dark&view=preview&codemirror=1&hidedevtools=1"
-     style="width:50%; height:300px; border:0; border-radius: 4px; overflow:hidden;"
-     title="silent-hooks-51628"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
-
-以上实例中 `{{message}}` 会根据输入框 `input` 的改变而改变，
-
-完整文档请参考[Vue 官方文档](https://cn.vuejs.org/v2/guide/index.html "Vue官方文档")

package/docs/m8mpdoc-develop/0001-/345/211/215/346/234/237/345/207/206/345/244/207/002-Vue/347/273/204/344/273/266/344/273/213/347/273/215.md

@@ -1,139 +0,0 @@
-# Vue 组件介绍
-
-<small class="text-muted">维护人：吴松泽</small>
-
-## 概述
-
-移动前端M8框架使用的`Vue`框架为核心框架，页面编写语法需要符合Vue组件语法。
-
-![](assets/0001/5eed77db14195aa5942c3de4.jpg)
-
-## .vue文件结构
-每一个`.vue文件`可以看成是一个`vue`组件文件，每个`vue`组件文件包含三种类型的顶级语言块：
-
- `<template>`，` <script>` 和 `<style>`。这三个部分分别代表了 `html`，`js`，`css`
-
-```html
-<!-- html部分 -->
-<template>
-    <div class="container">
-        <!-- 使用自定义van-header组件 -->
-        <van-header title="标题名称"></van-header>
-        <h1>{{ message }}</h1>
-    </div>
-</template>
-
-<!-- js部分 -->
-<script>
-// 引入需要使用的组件
-import vanHeader from '@components/header';
-export default {
-    components: {
-        // 声明需要用到的组件，才可以在template中使用
-        vanHeader
-    },
-    // 定义用到的数据，在template中使用{{ }}包裹，自动实现双向绑定
-    data() {
-        return {
-            message: 'hello world'
-        };
-    },
-    // 定义方法函数
-    methods: {
-        // 定义setMessage函数
-        setMessage: function() {
-            // data中的message字段被改变，页面上使用到message的地方会自动修改为HELLO WORLD
-            this.message = 'HELLO WORLD';
-        }
-    },
-    // 页面加载完成时，需要执行的内容
-    mounted() {
-        // 模拟业务逻辑、在页面加载完成后执行修改操作
-        // 执行setMessage方法函数
-        this.setMessage();
-    }
-};
-</script>
-
-<!-- css部分 -->
-<style scoped>
-.container {
-    background-color: #fff;
-}
-</style>
-
-```
-以上就是一个简单的 `*.vue `文件的基本结构。我们一部分一部分的来解释。
-
-## template 部分
-
-一个 `vue` 组件，他的 `template` 则代表它的 html 结构。
-
-##### 注意在`template`下只能有一个根元素。本例子中，我们采用了 `<div class="container"></div>`包裹实际内容。
-
-`<van-header title="标题名称"></van-header> `这个代码，是一个自定义组件。
-
-其中的`title`属性是组件自定义的参数。
-
-我们在其他地方写好的组件，然后就可以用这种方式使用。
-
-## script 部分
-首先，我们引入需要使用的自定义组件
-```js
-import vanHeader from '@comdto_components';
-```
-其次，除了引用的文件，我们将所有的代码包裹于如下的代码中间：
-```js
-export default {
-  // 这里写你的代码，外面要包起来。
-}
-```
-我们先引入了 `vanHeader` 这个组件，要把引用的组件给声明到 `components` 里面去，就可以在 `template` 里面使用了。
-
-在`template` 里使用组件需要遵循
-```js
-components: {
-    // 声明需要用到的组件，才可以在template中使用
-    vanHeader
-},
-```
-`data`是组件需要使用的数据。我们定义了一个 `message` 字符串。在 `template` 中，我们可以使用 `{{ message }}` 来使用定义的数据。
-当`data`中的`message`被改变，`template`使用到`{{ message }}`的地方会自动修改。
-```js
-// 定义用到的数据，在template中使用{{ }}包裹，自动实现双向绑定
-data() {
-    return {
-        message: 'hello world'
-    };
-},
-```
-`methods`是我们的这个组件的方法，也可以说是函数。比如，下面的代码就表示，我们的组件自定义了一个叫 setMessage() 的方法函数。
-```js
-// 定义方法函数
-methods: {
-    setMessage: function() {
-        this.message = 'HELLO WORLD';
-    }
-},
-```
-`mounted` 表示当我们的页面加载完成时，需要执行的内容。比如这里，我们就让组件在加载完成时，执行this.setMessage() 的函数。另外mounted是vuejs中的声明周期函数之一。（具体的生命周期函数请参考 [生命周期图示](https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA)）
-```js
-// 页面加载完成时，需要执行的内容
-mounted() {
-    // 执行后，页面将hello world修改为HELLO WORLD
-    this.setMessage();
-}
-```
-## style 部分
-
-这里对应 `template` 里内容出现的 `html` 元素写一些样式。
-
-`scoped`表示样式只对当前组件生效，不会污染其他组件样式。
-
-```html
-<style scoped>
-.container {
-    background-color: #fff;
-}
-</style>
-```