# 开发指导
AUI为内部开源使用，外部无法访问，底层逻辑使用Vue组件暴露封装，因此在不使用AUI情况下，通过原生Vue CLI脚手架搭建组件库形式暴露卡片组件，也能够正常使用。
#### 开发过程
准备工作中已经正常安装了Vue CLI脚手架，因此可以快速搭建Vue项目。
1. 初始化Vue项目。 
   ```
   vue create my-app
   ```
   选择Vue3。
   图1选择Vue3   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001884888533.png "点击放大")
   
   
2. 运行项目。 
   ```
   npm run serve
   ```
   图2项目目录   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001785282357.png "点击放大")
   图3访问页面   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001785322637.png "点击放大")
   
   
3. 卡片封装，新建package文件夹。 
   图4新增package包   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001738402904.png "点击放大")
   添加样例组件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组件预览   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001838676422.png "点击放大")
   
   
4. 创建axios请求。 
   在tools目录下创建request.js，本地开发使用axios作为service来发起请求。若需向CraftArts IPDCenter请求，打包前替换service声明为window.$service。
   图6request.js   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002060921221.png "点击放大")
   
   
5. 使用Vue打包的lib库模式，添加入口文件。 
   打包后的js文件运行逻辑已在门户专门处理，按照下列方式配置打包入口文件即可。
   在package目录下新建index.js文件，代码如下：
   ```
   import DemoCard from './DemoCard.vue'
   const component = {
       default: DemoCard
   };
   export default component
   ```
   
   
6. 打包配置。 
   图7vue.config.js 配置   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001838680542.png "点击放大")
   配置示例：
   ```
   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     css: { extract: false },
     configureWebpack: {
       output: {
         libraryExport: 'default',
         libraryTarget: 'umd',
         umdNamedDefine: true
       },
       optimization: {
         splitChunks: false
       },
       externals: {
         'vue': 'vue',
         'pinia': 'pinia',
         'axios': 'axios'
       }
     },
   })
   ```
   
   
7. 卡片打包。 
   到这里为止，卡片封装基本就完成了，当然卡片封装成什么样得看自己的业务需求，接下来就需要将卡片进行打包了。
   修改项目的package.json文件，配置打包命令：
   ```
   "build-lib": "vue-cli-service build --target lib --name mylib --dest lib src/package/index.js"
   ```
   图8npm命令   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001785503661.png "点击放大")
   打包命令解释：
   - "--target lib"关键字指定打包的目录。
   
   - "--name"打包后的文件名字。
   
   - "--dest"打包后的文件夹的名称。
   
   
   然后执行打包命令：
   ```
   npm run build-lib
   ```
   打包执行完成后我们项目目录下就会多出一个"lib"文件夹，存放的是打包后的文件。
   图9输出件   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001738464500.png "点击放大")
   
   
8. 修改文件名称并压缩为zip格式的压缩包。 
   将打包后的mylib.umd.min.js文件名修改为index.js，并和需要引用的静态资源一起选中，压缩在同一级目录。
   图10zip示例截图   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002061003705.png "点击放大")
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/public_sys-resources/note_3.0-zh-cn.png)
   Vue CLI生成的卡片输出为完整js，需要将其重命名为index.js，放置在zip压缩包内。否则会出现验证不通过的异常。