1 通过 Vue CLI 创建一个新项目

# npm
npm i @vue/cli -g

# or yarn
yarn global add @vue/cli

# in Windows, run `winpty vue.cmd create <project-name>`
vue create <project-name>

提醒：需要构建 Material 主题吗？请勾选 Less CSS 预处理器！

2 安装 @lbzui/vue

# npm
npm i @lbzui/vue -S

# or yarn
yarn add @lbzui/vue

3 引入 @lbzui/vue

// src/main.ts
import '@lbzui/vue/lib/lbzui.css'
import LBZUI from '@lbzui/vue'

Vue.use(LBZUI, {
  dense: false,
  ripple: true
})

或按需引入组件（推荐地）：

// src/main.ts
import '@lbzui/vue/lib/lbzui.css'
import {
  Backdrop,
  Button,
  Card,
  Checkbox,
  Dialog,
  Divider,
  Drawer,
  EmptyState,
  FAB,
  Icon,
  IconButton,
  List,
  ListItem,
  Radio,
  Snackbar,
  State,
  Switch,
  Tab,
  TabItem,
  TopAppBar
} from '@lbzui/vue'

Vue.prototype.$lbzui = {
  dense: false,
  ripple: true
}

Vue.use(Backdrop)
Vue.use(Button)
Vue.use(Card)
Vue.use(Checkbox)
Vue.use(Dialog)
Vue.use(Divider)
Vue.use(Drawer)
Vue.use(EmptyState)
Vue.use(FAB)
Vue.use(Icon)
Vue.use(IconButton)
Vue.use(List)
Vue.use(ListItem)
Vue.use(Radio)
Vue.use(State)
Vue.use(Switch)
Vue.use(Tab)
Vue.use(TabItem)
Vue.use(TopAppBar)

Vue.prototype.$lbzSnackbar = Snackbar

全局配置 <router-link> 默认的精确激活的类名：

// src/router/index.ts
const router = new VueRouter({
  linkExactActiveClass: 'lbz-is-activated'
})

4 构建 Material 主题

提醒：如果直接使用编译后的 CSS，可以跳过这一步。

主要是通过自定义布局网格、圆角边框半径、主题颜色等来创建自己的 Material 主题。

安装依赖包：

# npm
## upgrade Less to 3.5.0+
npm i less@latest -D

## convert modern CSS
npm i postcss-preset-env -D

## convert pixel units to rem units (optional)
npm i postcss-pxtorem -D

# or yarn
yarn add less postcss-preset-env postcss-pxtorem --dev

# in Windows, run `winpty vue.cmd add style-resources-loader`
vue add style-resources-loader

创建 src/assets/css/lbzui/index.less 并引入 CSS 资源：

@import '~normalize.css';

// all:
// @import '~@lbzui/vue/src/assets/css/index.less';

// or individual (recommended):
@import '~@lbzui/vue/src/assets/css/base.less';

@import '~@lbzui/vue/src/assets/css/utilities/aspect-ratio.less';
@import '~@lbzui/vue/src/assets/css/utilities/clearfix.less';
@import '~@lbzui/vue/src/assets/css/utilities/elevation.less';
@import '~@lbzui/vue/src/assets/css/utilities/layout-grid.less';
@import '~@lbzui/vue/src/assets/css/utilities/surface.less';
@import '~@lbzui/vue/src/assets/css/utilities/truncate.less';
@import '~@lbzui/vue/src/assets/css/utilities/typography.less';

@import '~@lbzui/vue/src/assets/css/components/backdrop.less';
@import '~@lbzui/vue/src/assets/css/components/button.less';
@import '~@lbzui/vue/src/assets/css/components/card.less';
@import '~@lbzui/vue/src/assets/css/components/checkbox.less';
@import '~@lbzui/vue/src/assets/css/components/dialog.less';
@import '~@lbzui/vue/src/assets/css/components/divider.less';
@import '~@lbzui/vue/src/assets/css/components/drawer.less';
@import '~@lbzui/vue/src/assets/css/components/empty-state.less';
@import '~@lbzui/vue/src/assets/css/components/fab.less';
@import '~@lbzui/vue/src/assets/css/components/icon.less';
@import '~@lbzui/vue/src/assets/css/components/icon-button.less';
@import '~@lbzui/vue/src/assets/css/components/list.less';
@import '~@lbzui/vue/src/assets/css/components/list-item.less';
@import '~@lbzui/vue/src/assets/css/components/radio.less';
@import '~@lbzui/vue/src/assets/css/components/snackbar.less';
@import '~@lbzui/vue/src/assets/css/components/state.less';
@import '~@lbzui/vue/src/assets/css/components/switch.less';
@import '~@lbzui/vue/src/assets/css/components/tab.less';
@import '~@lbzui/vue/src/assets/css/components/tab-item.less';
@import '~@lbzui/vue/src/assets/css/components/top-app-bar.less';

之后在 src/main.ts 中引入它：

import './assets/css/lbzui/index.less'

在 vue.config.js 中将 variables、mixins 注入到所有 less 文件：

const path = require('path')

const LBZUI_CSS_PATH = 'node_modules/@lbzui/vue/src/assets/css/'

function resolve (dir) {
  return path.resolve(__dirname, dir)
}

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // variables
        // resolve(`${LBZUI_CSS_PATH}variables/_*.less`),

        resolve(`${LBZUI_CSS_PATH}variables/_elevation.less`),
        // resolve(`${LBZUI_CSS_PATH}variables/_layout-grid.less`),
        resolve('src/assets/css/lbzui/_layout-grid.less'), // your custom layout grid
        resolve(`${LBZUI_CSS_PATH}variables/_motion.less`),
        // resolve(`${LBZUI_CSS_PATH}variables/_shape.less`),
        resolve('src/assets/css/lbzui/_shape.less'), // your custom shape
        resolve(`${LBZUI_CSS_PATH}variables/_state.less`),
        resolve(`${LBZUI_CSS_PATH}variables/_surface.less`),
        // resolve(`${LBZUI_CSS_PATH}variables/_theme.less`),
        resolve('src/assets/css/lbzui/_theme.less'), // your custom theme
        resolve(`${LBZUI_CSS_PATH}variables/_variables.less`),

        // mixins
        resolve(`${LBZUI_CSS_PATH}utilities/_*.less`)
      ]
    }
  }
}

在 package.json 或 postcss.config.js 中使用 PostCSS 插件转换 CSS：

// package.json (if you prefer placing config in package.json)
"postcss": {
  "plugins": {
    "postcss-preset-env": {
      "stage": 3,
      "autoprefixer": {
        "flexbox": "no-2009",
        "grid": "no-autoplace"
      },
      "importFrom": [
        "src/assets/css/lbzui/variables.css"
      ]
    },
    "postcss-pxtorem": {
      "unitPrecision": 8,
      "propList": [
        "font",
        "font-size",
        "line-height"
      ]
    }
  }
},

// postcss.config.js (if you prefer placing config in dedicated config files)
module.exports = {
  plugins: {
    // https://github.com/csstools/postcss-preset-env#options
    'postcss-preset-env': {
      stage: 3,
      autoprefixer: {
        flexbox: 'no-2009',
        grid: 'no-autoplace'
      },
      importFrom: [
        // 'node_modules/@lbzui/vue/src/assets/css/variables/variables.css'
        'src/assets/css/lbzui/variables.css' // your custom CSS Variables
      ]
    },
    // https://github.com/cuth/postcss-pxtorem#options
    'postcss-pxtorem': {
      unitPrecision: 8,
      propList: ['font','font-size','line-height']
    }
  }
}

5 如使用按钮组件

<template>
  <lbz-button @click.stop="fclick">Hello world</lbz-button>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'HelloWorld',
  methods: {
    fclick(e: MouseEvent): void {
      alert('Hello @lbzui/vue!')
    }
  }
}
</script>

6 从 Google CDN 上加载 Roboto font、Material Icons（可选地）

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">

在 Vue.js 中使用 @lbzui/vue