zarm-vue-next
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0-alpha.6 • Public • Published

    Zarm Vue Next

    版本

    • Alpha版:npm package

    基于Vue3.0使用

    • 使用vue-cli初始化Vue3.x项目

    Install 安装

    npm install zarm-vue-next --save

    Import 引入

    • 全组件引入
    import { createApp } from 'vue';
    import zarmVue from 'zarm-vue-next';
    // 引入全局样式
    import 'zarm-vue-next/zarm-vue.default.css';
    
    const app = createApp(App);
    app.use(zarmVue);
    • 按需引入

    借助ElementUI提供的babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

    首先,安装 babel-plugin-component:

    npm install babel-plugin-component -D

    然后,将 .babelrc 添加:

    {
      // ...
      "plugins": [["component", {
          "libraryName": "zarm-vue-next",
          "styleLibraryName": "theme"
        }
      ]]
    }

    接下来,如果你只希望引入部分组件,比如 Button 和 Alert,那么需要在 main.js 中写入以下内容:

    import { Button, Alert } from 'zarm-vue-next'
    app.use(Button)
    app.use(Alert)
    • 也可以通过cdn引入umd模块
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <link rel="stylesheet" href="https://unpkg.com/zarm-vue-next@latest/zarm-vue.default.css">
      <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
      <script src="https://unpkg.com/zarm-vue-next@latest/zarm-vue.umd.js"></script>
    </head>
    <body>
      <div id="app">
          <za-button theme="primary">普通按钮</za-button>
      </div>
    </body>
    <script>
      Vue.createApp().mount("#app");
    </script>
    </html>

    暗黑模式

    • import
    // 引入暗黑样式
    import 'zarm-vue-next/zarm-vue.dark.css';
    • umd
    <link rel="stylesheet" href="https://unpkg.com/zarm-vue-next@latest/zarm-vue.dark.css">

    Install

    npm i zarm-vue-next

    DownloadsWeekly Downloads

    13

    Version

    3.0.0-alpha.6

    License

    MIT

    Unpacked Size

    12.9 MB

    Total Files

    616

    Last publish

    Collaborators

    • zhanwangye