m8-framework-mcp 1.0.0

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

@@ -0,0 +1,97 @@
+# 工程自定义配置
+
+## 前言
+
+移动前端跨端框架支持工程自定义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

@@ -0,0 +1,186 @@
+# 环境准备
+
+::: 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

@@ -0,0 +1,218 @@
+# 基础语法
+
+<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

@@ -0,0 +1,139 @@
+# 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>
+```