开发指导

AUI为内部开源使用，外部无法访问，底层逻辑使用Vue组件暴露封装，因此在不使用AUI情况下，通过原生Vue CLI脚手架搭建组件库形式暴露卡片组件，也能够正常使用。

开发过程

准备工作中已经正常安装了Vue CLI脚手架，因此可以快速搭建Vue项目。

初始化Vue项目。
```
vue create my-app
```
选择Vue3。

图1 选择Vue3
运行项目。
```
npm run serve
```
图2 项目目录

图3 访问页面

卡片封装，新建package文件夹。

图4 新增package包
点击放大

添加样例组件DemoCard.vue，局部注册UI组件，添加任意样例代码如下：

<template>
    <div class="hello">
      <h1>我是卡片</h1>
      <img src="../assets/logo.png"/>
    </div>
  </template>
  <script>
  export default {
    name: 'DemoCard',
    props: {
      url: String  // url接收来自门户关于静态资源的路径
    }
  }
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  h3 {
    margin: 40px 0 0;
  }
  </style>

然后我们引用到App.vue组件里面验证一下，看组件是否可用，代码如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './package/DemoCard.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最终效果显示如下：

图5 组件预览

创建axios请求。

在tools目录下新建request.js文件，本地开发时引入axios，使用service发起请求。开发完成后，打包前将service的定义替换成window.$servie。

图6 request.js
使用Vue打包的lib库模式，添加入口文件。

打包后的js文件运行逻辑已在门户专门处理，按照下列方式配置打包入口文件即可。

在package目录下新建index.js文件，代码如下：
```
import DemoCard from './DemoCard.vue'
const compoent = {
    default: DemoCard
};
export default compoent
```

打包配置。

图7 vue.config.js 配置
点击放大

配置示例：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: { extract: false },
  configureWebpack: {
    output: {
      libraryExport: 'default'
    },
    optimization: {
      splitChunks: false
    },
    externals: {
      'vue': 'vue',
      'vue-router': 'vue-router',
      'vue-i18n': 'vue-i18n',
      'pinia': 'pinia',
      'axios': 'axios'
    }
  },
})

卡片打包。

到这里为止，卡片封装基本就完成了，当然卡片封装成什么样得看自己的业务需求，接下来就需要将卡片进行打包了。

修改项目的package.json文件，配置打包命令：
```
"build-lib": "vue-cli-service build --target lib --name mylib --dest lib src/package/index.js"
```
图8 npm命令

打包命令解释：
- “--target lib”关键字指定打包的目录。
- “--name”打包后的文件名字。
- “--dest”打包后的文件夹的名称。
然后执行打包命令：
```
npm run build-lib
```
打包执行完成后我们项目目录下就会多出一个“lib”文件夹，存放的是打包后的文件。

图9 输出件
修改文件名称并压缩为zip格式的压缩包。

将打包后的mylib.umd.min.js文件名修改为index.js，并和需要引用的静态资源一起选中，压缩在同一级目录。

图10 zip示例截图

Vue CLI生成的卡片输出为完整js，需要将其重命名为index.js，放置在zip压缩包内。否则会出现验证不通过的异常。