npm install zarm-vue --save
- 全组件引入
import Vue from 'vue';
import zarmVue from 'zarm-vue';
// 引入全局样式
import 'zarm-vue/zarm-vue.default.css';
Vue.use(zarmVue);
- 按需引入
借助ElementUI
提供的babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 添加:
{
// ...
"plugins": [["component", {
"libraryName": "zarm-vue",
"styleLibraryName": "theme"
}
]]
}
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import { Button, Alert } from 'zarm-vue'
Vue.use(Button)
Vue.use(Alert)
- 也可以通过cdn引入umd模块
<link rel="stylesheet" href="https://unpkg.com/zarm-vue@latest/zarm-vue.default.css">
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>>
<script src="https://unpkg.com/zarm-vue@latest/zarm-vue.umd.js"></script>
new Vue({
el: '#app',
template: '<za-button theme="primary">普通按钮</za-button>',
components: { zaButton },
});
clone本仓库后先安装依赖,然后通过修改 styles/variables.scss
文件重写sass变量。运行下面命令生成新样式
npm run build:theme
新生成的样式文件: lib/zarm-vue.default.css
MIT