快速开始

本节将介绍如何在项目中使用 Liv Web。

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue';
import LivWeb from 'liv-web';
import 'liv-web/dist/index.css';
import App from './App.vue';

const app = createApp(App);

app.use(LivWeb);
app.mount('#app');

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["liv-web/global"]
  }
}

自动按需导入（推荐）

您需要使用额外的插件来导入要使用的组件。

首先你需要安装unplugin-vue-components和unplugin-liv-web这两款插件。

npm install -D unplugin-vue-components unplugin-liv-web

Liv Web 官方插件unplugin-liv-web提供了相应的解析器用于实现组件和样式的自动按需导入，你只需要把下列代码插入到你的 Vite 或 Webpack 的配置文件中。

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { LivWebResolver } from 'unplugin-liv-web/resolvers';

export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [LivWebResolver()],
    }),
  ],
});

Webpack

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { LivWebResolver } = require('unplugin-liv-web/resolvers');

module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [LivWebResolver()],
    }),
  ],
};

想了解更多打包(Rollup, Vue CLI) 和配置工具，请参考 unplugin-vue-components 和 unplugin-liv-web文档。

快捷搭建项目模板

🚧建设中

开始使用

现在你可以启动项目了。对于每个组件的用法，请查阅对应的独立文档。