freelog开发者文档

Appearance

环境要求: vite6.x版本要求node18.x版本以上

本示例使用vite+vue3作说明

不想麻烦？点此查看脚手架直接创建模板，模板中vue版本可能过旧

1. 创建项目 ​

使用vite创建vue3示例项目

bash
# 若是npm 7+，需要添加额外的 --，使用下面命令：
$ npm create vite@latest vue-theme -- --template vue

# 若是yarn，使用下面命令
yarn create vite vue-theme --template vue

# 若是pnpm，使用下面命令
pnpm create vite vue-theme --template vue

安装依赖

bash
# 进入项目目录
cd vue-theme
bash
# 若是npm，使用下面命令
npm i

# 若是yarn，使用下面命令
yarn

# 若是pnpm，使用下面命令
pnpm i

2. 接入改造 ​

本案例是一个比较简单的例子, 若想快速完成一个插件项目, 可略过以下的具体改造指南, copy下文贴出的文件内容（即vite.config.js、main.js、HelloWorld.vue）， 并安装vite-plugin-mkcert、freelog-runtime两个库，即可快速完成项目哦;

具体改造指南：

目前，你的文件目录如下图所示

1737279481676

vite.config.js的文件内容如下:

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import mkcert from "vite-plugin-mkcert";

// https://vite.dev/config/
export default defineConfig({
  base: './',
  plugins: [mkcert(), vue()],
  server: {
    port: 8989,
    host: true,
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  },
})

启动项目，你的网站应该可以使用https访问，如 https://localhost:8989/

# 若你是npm，使用下面命令
npm run dev

# 若是yarn，使用下面命令
yarn run dev

# 若是pnpm，使用下面命令
pnpm dev

tip: 若你是首次访问，会提示“不安全”，在浏览器中选择继续访问。

3. 开始开发 ​

3.1 安装API库与初始化 ​

安装API库与初始化，看这里

js
// main.js文件内容如下
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { initFreelogApp } from 'freelog-runtime'

const appInstance = createApp(App)

window.mount = () => {
  initFreelogApp()
  appInstance.mount('#app')
}

window.unmount = () => {
  app.unmount()
}

if (!window.__MICRO_APP_ENVIRONMENT__) {
  window.mount();
}

4. 打包压缩并上传发布 ​

打包

bash
# 若是npm, 执行下面命令
npm run build

# 若是yarn, 执行下面命令
yarn run build

# 若是pnpm, 执行下面命令
pnpm build

进入打包产物文件夹, 如dist，选择所有文件，压缩成一个压缩包，如dist.zip

step1: 发布, 查看这里

step2: 签约主题到节点；查看这里

step3: 启用主题；查看这里

Q1： 为什么要将主题签约到节点？

A1： 所谓节点，其实是一个网站地址。主题可类比为网站的衣服，节点可签约多个主题拥有多件不同的衣服，但只能应用一个主题，启用某个主题后， 会发现网站用的就是这个主题作为外观；一句话总结，签约是为了让节点可使用主题作为外观；

5. 项目调试 ​

访问你的节点地址，如 https://acarlikecar.freelog.com ，现在可确认刚启用的主题是否已生效

tip: 若你还末创建节点, 创建引导地址为 https://freelog3.freelog.com/?theme=%2Freader%3Fid%25M262ce6f8a456ff0002e32915f%25M1title%25M2二、【运营节点】操作指南&w06c513=%2F

5.1 访问本地https ​

若你已在设备中访问过此web项目，并在提示“不安全”时选择了继续访问，可略过此步骤。

当你还末在设备的浏览器中访问此web项目，那么

  • 若你是pc设备，当首次访问https://localhost:8989时，会提示“不安全”，在浏览器中选择继续访问。
  • 若你是移动设备，当首次访问https://192.168.2.184:8989时，会提示“不安全”，在浏览器中选择继续访问。

5.2 本地调试 ​

  1. 若你是pc设备，则使用url传参的形式进行调试，在节点地址后加上?dev=https://localhost:8989进行调试；
  2. 若你是移动设备，则需用手机设备连接局域网(wifi), 使用url传参的形式进行调试，在节点地址后加上?dev=https://192.168.2.184:8989进行调试

5.3 使用API ​

以pc端为例，使用getExhibitListByPaging获取数据并渲染了一个资源列表，HelloWorld.vue的文件内容如下：

js
<script setup>
import { ref } from 'vue'
import { freelogApp } from 'freelog-runtime'

const list = ref([])

freelogApp.getExhibitListByPaging().then(res => {
  if (res.data.errCode === 0) {
    list.value = res.data.data.dataList
  }
})

const handlerClick = (item) => {
  alert(item.exhibitName)
}

</script>

<template>
  <ul>
    <li v-for="item in list" @click="handlerClick(item)">
      <div class="r-name">展品名称：{{ item.exhibitName }}</div>
      <div class="r-type">资源类型： {{ item.articleInfo.resourceType.join('/') }}</div>
    </li>
  </ul>
</template>

<style scoped>
ul {
  padding: 0;
  margin: 0;

  li {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
    margin-bottom: 15px;
    background-color: #f5f5f5;
    border: 1px solid #989898;
    border-radius: 6px;
    padding: 0 10px;
    div {
      text-align: left;
    }
  }
}
</style>

效果图如下所示：

1737278153117

我们再调整下样式文件style.css, 对id为app的选择器进行样式调整：

css
#app {
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  width: 100%;
  overflow: auto;
  height: 100vh;
}

调整完样式后，其效果图如下所示：

1739008572390

开发完成后，再次发布/发行即可，若发行后访问节点发现未生效，则需手动切换一次版本再尝试访问节点（不知如何切换？查看这里）；