在vue中使用amis 低代碼平臺amis學習

之前在使用amis時，是通過百度給的一個完整amis示例來用的，沒有結合到自己的vue項目中，傳送門：低代碼平臺amis學習

本次簡單介紹下，如何在vue中引入ami

1、首先要在vue項目中引入amis的sdk

引入方式有2種：(1)使用cdn方式   (2)下載sdk文件-本地引用

(1) 使用cdn方式，直接引用遠程資源
打開vue項目，找到目錄public下的index.html

但是這種方式有時候訪問比較慢，加載時間有點長

(2) 下載sdk文件-本地引用

因爲在本地已經安裝了amis依賴包，所以把這些依賴文件替換爲本地的

先來看一下amis依賴包的位置：node_modules/amis/sdk ， sdk.js 和 sdk.css 等都在這裏

爲了不污染node_modules中的原始文件，我在項目中新建了一個目錄sdk，然後把amis依賴包中sdk目錄下的文件都拷貝出來了一份

接下來修改index.html即可

 

2、使用amis編寫頁面

新建一個vue文件，你將使用這個文件來渲染頁面

<template>
    <div ref="box" style="text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 20px">
      基本信息
    </div>
  </template>
  <script>
  export default {
    mounted() {
      const amis = amisRequire('amis/embed')
      let url = this.COMMON.test_url
      let amisJSON = {
        "type": "page",
        "title": "工具類",
        "remark": ""
    }
      const amisScoped = amis.embed(this.$refs.box, amisJSON)
    }
  }
  </script>

amisJSON變量用於接收繪製頁面用的json參數

這樣就能在vue中使用amis來編寫前端頁面了~