vue3中使用lulu-UI和源码解析

vue3中使用lulu-UI和源码解析

前言

本文分析的是LuLu UI的Edge主题，这是张鑫旭开发的一套UI组件，使用原生JavaScript编写，使用了JavaScript和CSS前沿的新语法和新特性，React和Vue项目均适用。其核心主旨为面向设计、面向项目的半封装web组件开发。

安装vue3和lulu

• 通过Vite 快速构建 Vue 项目

// npm 6.x
npm init vite@latest <project-name> --template vue

// npm 7+，需要加上额外的双短横线
npm init vite@latest <project-name> -- --template vue

cd <project-name>
npm install
npm run dev

• 安装lulu UI

npm install lu2

引入和展示效果

该组件支持按需引入，减小项目的体积，目前引入的是edge主题，其他主题引入也是如此。

main.js 引入

import {
    createApp } from 'vue'
import App from './App.vue'
import 'lu2/theme/edge/js/common/all.js'
import 'lu2/theme/edge/css/common/ui.css'

createApp(App).mount('#app')

页面引入组件

<template>
  <h1>开始引入lulu-日期组件</h1>
  <input is="ui-datetime"