如何使用

必须的基础知识

M³JS是面向前端开发人员提供的开发工具包（Toolkit），我们默认用户已经具备下列前端开发相关的基础知识。

HTML5

HTML5 是 HyperText Markup Language 5 的缩写，是构建Web内容的一种描述语言。关于HTML5的详细内容可以点击参考这里。与HTML5紧密相关的内容，还包括CSS和JavaScript。用户可以通过一些网站自行学习这些内容。

Vue

M³Meta小应用以 Vue 组件形式进行开发。Vue是一套用于构建用户界面的渐进式框架。我们使用Vue CLI 作为前端快速开发的辅助组件。M³JS是在Vue CLI基础上提供的开发工具包。

Node.js

Node.js是一个 JavaScript 运行时环境。Vue CLI需要在Node.js上运行，以提供对前端开发过程的支持。你需要在开发电脑上安装Node.js软件。通过这里可以下载安装对应不同操作系统版本的Node.js。在前端开发过程中，会经常使用Node.js中的npm命令。

开发流程

下面以Mac操作系统为例，说明M³Meta小应用开发流程。

创建工程

假设你要创建的M³Meta小应用的英文简称为 MyM3App，中文名称为M³Meta小应用。

创建工程目录

工程目录可以创建在你电脑上任何位置，这里以创建在 /opt/code 目录下为例。

mkdir -p /opt/code/MyM3App
cd /opt/code/MyM3App

安装M³JS

cd /opt/code/MyM3App
npm install -g @wecise/m3js

初始化工程文件

cd /opt/code/MyM3App
m3js init

修改环境信息

cd /opt/code/MyM3App

编辑.env文件

vi .env

NODE_ENV="development"                # 指定Node运行在开发模式
VUE_APP_M3_APP="m3app"                # M³Meta小应用的简称，由英文字母、数字、下划线组成
VUE_APP_M3_TITLE="M3小应用"            # M³Meta小应用的中文名称
VUE_APP_M3_APP_VERSION="1.0.0"        # M³Meta小应用的版本
VUE_APP_M3_HOST="47.92.151.165:8080"  # M³Meta平台的数据服务地址
VUE_APP_M3_COMPANY="wecise"           # 可通过M³Meta平台申请注册公司信息
VUE_APP_M3_USERNAME="username"        # 可通过M³Meta平台申请注册用户
VUE_APP_M3_PASSWORD="123456"          # 可通过M³Meta平台修改用户密码

本地试运行

cd /opt/code/MyM3App
m3js run

终端显示类似如下内容：

  App running at:
  - Local:   http://localhost:8080
  - Network: http://192.168.1.4:8080

  Note that the development build is not optimized.
  To create a production build, run npm run build.

查看运行结果

在浏览器中打开 http://localhost:8080 查看页面是否正常。

M³Meta小应用开发

M³Meta小应用以 Vue 组件形式进行开发。所有 Vue 组件均存放在工程目录的 src 目录下，入口主文件为 App.vue。其它使用到的 Vue 组件放在 components 目录下。用户可根据实际需求进行分析设计，组织 Vue 组件的目录结构。

M³JS在初始化M³Meta小应用时，已经创建好入口主文件 App.vue 和一些常用的 Vue组件。后面会逐一说明这些组件的功能。

M³Meta小应用测试

......

M³Meta小应用发布

执行M³JS发布命令，M³JS 编译后发布到M³Meta平台

cd /opt/code/MyM3App
m3js publish