open-index/open-npm huggingface dataset:
npm package: @mraiguo-test/iframe-page
Description: ## Project setup ``` yarn install ```
Latest version: 0.1.6

# iframe-page

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @mraiguo-test/iframe-widget
Description: ## Project setup ``` yarn install ```
Latest version: 0.1.1

# iframe-widget

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @mraiguo-test/vue-web-component
Description: 与 umd 格式的对比，使用 shadowDom 的方式插入，减少了样式污染的问题
Latest version: 0.1.10

# web-component
与 umd 格式的对比，使用 shadowDom 的方式插入，减少了样式污染的问题

## 如何使用
public/index.html
```html
    <script src="https://unpkg.com/vue"></script>
    <script src="//unpkg.com/@mraiguo-test/vue-web-component/dist/foo-hello.min.js"></script>
```
vue.config.js
```js
module.exports = {
  configureWebpack:{
    externals: {
       'vue': 'Vue',
    }
  },
}
```
注意需要使用script加载 vue，且把项目中的vue externals出去，否则警告  
![20211028170058](https://raw.githubusercontent.com/mraiguo/image-respository/master/picGo20211028170058.png)


* [x] 接入 element-ui 看 web-component 能否处理
![20211028170024](https://raw.githubusercontent.com/mraiguo/image-respository/master/picGo20211028170024.png)
全局导入 element-ui 的脚本后警告消失，但是样式也丢失了
![20211028171835](https://raw.githubusercontent.com/mraiguo/image-respository/master/picGo20211028171835.png)  
排查发现，项目入口是 HelloWorld.vue 文件，需要在这个文件里面引入样式，但是这样也带来一个问题，就是包体积的增大

* [ ] 接入 vue-router 看能否处理
vue 接入 router 的时候需要在创建实例的时候挂载上去，但是 vue 的 web-component 只是
正常的暴露一个 vue 文件，没有这个时机去做这个
```javascript
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')
```

* [ ] 接入 vuex 看能否处理
npm package: @mraiguo-test/vue-widget
Description: 默认打包出来的 umd 包的导出属性名是 package.json 的 name （不能是驼峰法）,但是 js 变量不能有中划线，  也就导致了导出的变量只能用 window["vue-widget"], 可以通过 `--name VueWidget` 指定暴露的变量名
Latest version: 0.1.6

# vue-widget

默认打包出来的 umd 包的导出属性名是 package.json 的 name （不能是驼峰法）,但是 js 变量不能有中划线， 
也就导致了导出的变量只能用 window["vue-widget"], 可以通过 `--name VueWidget` 指定暴露的变量名

# inline-vue 无效

# css 是否要打入到扩展点进去
vue.config.js 配置
```
module.exports = {
  css: {
    extract: false
  }
}

```

# 在脚本的头部中打出版本号，用于后续核对
vue.config.js 配置
```
const version = require('./package.json').version
module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [new webpack.BannerPlugin(version)],
    }
  }
}

```

# 尝试下这个方案
[构建目标 | Vue CLI](https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BC%82%E6%AD%A5-web-components-%E7%BB%84%E4%BB%B6)