<html lang="en">
  <head>
    <!-- 导入element-plus样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- 导入vue3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- 导入element-plus -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- - 导入element-plus 国际化文件 -->
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>

    <!-- 导入plus-pro-components样式 -->
    <link rel="stylesheet" href="//unpkg.com/plus-pro-components/index.css" />
    <!--导入plus-pro-components"  -->
    <script src="//unpkg.com/plus-pro-components"></script>
    <!-- - 导入plus-pro-components 国际化文件 -->
    <script src="//unpkg.com/plus-pro-components/locale/zh-cn"></script>
    <title>test</title>
  </head>

  <body>
    <div id="app">
      <h3>{{message}}</h3>
      <el-button type="primary" style="margin-bottom:10px;">按钮</el-button>    
      <plus-date-picker></plus-date-picker>
    </div>

    <script>
      const App = {
        data() {
          return {
            message: 'Hello PlusProComponents'
          }
        }
      }
      const app = Vue.createApp(App)
      app.use(ElementPlus, {
        locale: { ...ElementPlusLocaleZhCn, ...PlusProComponentsLocaleZhCn }
      })
      app.use(PlusProComponents)
      app.mount('#app')
    </script>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.