AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用Vue3.2 + Vite2.7 从0快速打造一个UI组件库

2023-01-04 606
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 最近自己学习写了一个基于Vue3的组件库，感觉`有点意思`，这篇文章来记录一下我是怎么从0快速打造一个UI组件库的

1. 前言

最近自己学习写了一个基于Vue3的组件库，感觉有点意思，这篇文章来记录一下我是怎么从0快速打造一个UI组件库的

  • 😘附上访问地址jw-ui
  • 上面网址打不开的话可以用这个jw-ui

2. 使用Vite搭建官网

Vite是尤雨溪开发的一种新型前端构建工具，具体介绍可以查看官方文档

2.1 创建项目

2.1.1. 全局安装vite（这里我装的时候是2.7.2）

$ yarn create vite@2.7.2

2.1.2. 构建一个vue模板(项目名可以改成自己的名字)

yarn create vite jw-ui --template vue

2.1.3. 装好之后按照提示逐步执行命令

cd jw-ui
yarn
yarn dev

可以看到界面

image.png

ps: 推荐的IDE和设置：VSCode + Volar

2.2 基本完成官网的搭建

2.2.1. 下载vue-router

yarn add vue-router@4

2.2.2. 创建home首页与doc文档页 以及顶部导航栏

/* /views/home/index.vue 首页*/
<template>
    <div>
        Home
    </div>
</template>
/* /views/doc/index.vue 文档页面 */
<template>
  <div>
    Doc
  </div>
</template>
/* /components/Topnav.vue 顶部导航栏组件 */
<template>
  <div class="topnav">
    <router-link to="/home">首页</router-link>
    <router-link to="/doc">文档</router-link>
  </div>
</template>

2.2.3. 配置路由

创建路由配置文件

// router/index.ts 
import { createRouter, createWebHashHistory } from "vue-router";
const history = createWebHashHistory();

const router = createRouter({
  history,
  routes: [
    { path: "/", redirect: "" },
  ],
});

export default router;

在main.ts里导入，使得整个应用支持路由。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router);

app.mount("#app");

修改App.vue

<template>
  <Topnav />
  <router-view />
</template>
<script setup>
import Topnav from "./components/Topnav.vue";
</script>

到目前为止的效果

jw-ui演示1.gif

装饰一下顶部导航栏后的效果

jw-ui演示2.gif

这里首页按照自己喜欢的来写CSS就好了，接下来讲一下文档页面。

文档页需要一个侧边栏来切换不同组件的文档，这里我就举例做一个Button组件

// doc/index.vue
<template>
  <div class="layout">
    <div class="content">
      <aside>
        <router-link class="menu-item text-overflow" to="/doc/button"
          >Button 组件</router-link
        >
      </aside>
      <main style="padding-left: 302px">
        <router-view />
      </main>
    </div>
</template>
// router/index.ts 添加一个展示的button页面
import { createRouter, createWebHashHistory } from "vue-router";

import Home from "../views/home/index.vue";
import Doc from "../views/doc/index.vue";
import ButtonDoc from "../views/doc/button/index.vue";

const history = createWebHashHistory();

const router = createRouter({
  history,
  routes: [
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    {
      path: "/doc",
      component: Doc,
      children: [{ path: "button", component: ButtonDoc }],
    },
  ],
});

export default router;
// /views/doc/button/index
<template>
  <Button />
</template>

<script setup>
import Button from '../../../lib/button/index.vue'
</script>

<style lang="scss" scoped>

</style>

展示效果
image.png

好了到这里官网总算是基本搭建完了，我们终于就可以愉快的在src/lib/button/index.vue文件里封装组件啦。（封装的组件都放在lib文件夹里，以后打包用）

3. 封装一个Button组件

下面附上我写的一个Button组件以及使用效果

PS: 需要注意的一点是封装的样式一定要加自己独特的前缀我这里是 jw 以避免在项目中产生样式重叠

<template>
  <button class="jw-button" :class="classes">
    <span v-if="loading" class="jw-loadingIndicator"></span>
    <slot> {{ theme }} </slot>
  </button>
</template>
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps({
  theme: {
    type: String,
    default: "default",
  },
  dashed: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "default",
  },
  round: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const { theme, dashed, size, round, disabled } = props;
const classes = computed(() => {
  return {
    [`jw-theme-${theme}`]: theme,
    [`jw-theme-dashed`]: dashed,
    [`jw-size-${size}`]: size,
    [`is-round`]: round,
    [`is-disabled`]: disabled,
  };
});
</script>

<script lang="ts">
export default {
  name: "JwButton",
};
</script>

<style lang="scss" scoped>
$h-default: 32px;
$h-small: 20px;
$h-large: 48px;
$white: #fff;
$default-color: #333;
$primary-color: #36ad6a;
$info-color: #4098fc;
$success-color: #85ce61;
$warning-color: #f0a020;
$error-color: #d03050;
$grey: grey;

$default-border-color: #d9d9d9;

$radius: 3px;
$green: #18a058;

.jw-button {
  box-sizing: border-box;
  height: $h-default;
  background-color: #fff;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border-radius: $radius;
  box-shadow: 0 1px 0 fade-out(black, 0.95);
  transition: all 250ms;
  color: $default-color;
  border: 1px solid $default-border-color;
  user-select: none;

  &:focus {
    outline: none;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  &.jw-size-large {
    font-size: 24px;
    height: $h-large;
    padding: 0 16px;
  }
  &.jw-size-small {
    font-size: 12px;
    height: $h-small;
    padding: 0 8px;
  }

  &.is-round.jw-size-default {
    border-radius: calc($h-default / 2);
  }
  &.is-round.jw-size-large {
    border-radius: calc($h-large / 2);
  }
  &.is-round.jw-size-small {
    border-radius: calc($h-small / 2);
  }

  &.jw-theme-default {
    &:hover {
      color: $green;
      border-color: $green;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $green $green $green transparent;
      }
    }
    &:active {
      color: darken($green, 20%);
      border-color: darken($green, 20%);

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: darken($green, 20%) darken($green, 20%)
          darken($green, 20%) transparent;
      }
    }
    &.jw-theme-dashed {
      border-style: dashed;
    }
    > .jw-loadingIndicator {
      border-style: dashed;
      border-color: $default-color $default-color $default-color transparent;
    }
  }
  &.jw-theme-primary {
    background-color: $primary-color;
    border-color: $primary-color;
    color: $white;

    &:hover {
      background: lighten($primary-color, 20%);
      border-color: lighten($primary-color, 20%);
    }
    &:active {
      background-color: darken($primary-color, 20%);
      border-color: darken($primary-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($primary-color, 20%);
      border-color: lighten($primary-color, 20%);
      &:hover {
        background: lighten($primary-color, 20%);
        border-color: lighten($primary-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $primary-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $primary-color $primary-color $primary-color transparent;
      }
    }
  }

  &.jw-theme-info {
    background-color: $info-color;
    border-color: $info-color;
    color: $white;
    &:hover {
      background: lighten($info-color, 20%);
      border-color: lighten($info-color, 20%);
    }
    &:active {
      background-color: darken($info-color, 20%);
      border-color: darken($info-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($info-color, 20%);
      border-color: lighten($info-color, 20%);
      &:hover {
        background: lighten($info-color, 20%);
        border-color: lighten($info-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $info-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $info-color $info-color $info-color transparent;
      }
    }
  }

  &.jw-theme-success {
    background-color: $success-color;
    border-color: $success-color;
    color: $white;
    &:hover {
      background: lighten($success-color, 20%);
      border-color: lighten($success-color, 20%);
    }
    &:active {
      background-color: darken($success-color, 20%);
      border-color: darken($success-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($success-color, 20%);
      border-color: lighten($success-color, 20%);
      &:hover {
        background: lighten($success-color, 20%);
        border-color: lighten($success-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $success-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $success-color $success-color $success-color transparent;
      }
    }
  }

  &.jw-theme-warning {
    background-color: $warning-color;
    border-color: $warning-color;
    color: $white;
    &:hover {
      background: lighten($warning-color, 20%);
      border-color: lighten($warning-color, 20%);
    }
    &:active {
      background-color: darken($warning-color, 20%);
      border-color: darken($warning-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($warning-color, 20%);
      border-color: lighten($warning-color, 20%);
      &:hover {
        background: lighten($warning-color, 20%);
        border-color: lighten($warning-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $warning-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $warning-color $warning-color $warning-color transparent;
      }
    }
  }

  &.jw-theme-error {
    background-color: $error-color;
    border-color: $error-color;
    color: $white;
    &:hover {
      background: lighten($error-color, 20%);
      border-color: lighten($error-color, 20%);
    }
    &:active {
      background-color: darken($error-color, 20%);
      border-color: darken($error-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($error-color, 20%);
      border-color: lighten($error-color, 20%);
      &:hover {
        background: lighten($error-color, 20%);
        border-color: lighten($error-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $error-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $error-color $error-color $error-color transparent;
      }
    }
  }

  > .jw-loadingIndicator {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 8px;
    border-color: $white $white $white transparent;
    border-style: solid;
    border-width: 2px;
    animation: jw-spin 1s infinite linear;
  }
}

@keyframes jw-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

jw-ui演示3.gif

虽然有不完美，但差不多就这个意思吧👀

4. 封装Markdown组件介绍文档

4.1. 下载

vite-plugin-markdown：一个插件可以让你导入Markdown文件作为各种格式的vite项目。

github-markdown-css：复制GitHub Markdown风格

yarn add github-markdown-css vite-plugin-markdown

4.2. main.ts中引入

import "github-markdown-css";

4.3. vite.config.js中配置vite-plugin-markdown插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const md = require("vite-plugin-markdown");

export default defineConfig({
  plugins: [vue(),
    md.plugin({
    mode: ["html", "vue"],
  }),]
})

4.4. 封装Markdown组件

// /components/Markdown.vue
<template>
  <article class="markdown-body" v-html="content"></article>
</template>

<script setup lang="ts">
// 传入的md文件
const props = defineProps({
  content: {
    type: String,
    required: true,
  },
});
</script>

4.5. 创建介绍页面路由

import { h } from "vue";
import { createRouter, createWebHashHistory } from "vue-router";

import Home from "../views/home/index.vue";
import Doc from "../views/doc/index.vue";
import ButtonDoc from "../views/doc/button/index.vue";

const history = createWebHashHistory();

import Markdown from "../components/Markdown.vue";
const md = (string) => h(Markdown, { content: string, key: string });
import { html as Intro } from "../../markdown/intro.md";
const IntroDoc = md(Intro);

const router = createRouter({
  history,
  routes: [
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    {
      path: "/doc",
      component: Doc,
      children: [
        { path: "intro", component: IntroDoc },
        { path: "button", component: ButtonDoc },
      ],
    },
  ],
});

export default router;

可以看到，最终md就能导入，并且生成了github上md的样式了😁

image.png

5. 自定义代码块获取组件展示源代码

5.1. 自定义插件vue-custom-blocks-plugin

import path from "path";
import fs from "fs";
import { baseParse } from "@vue/compiler-core";
const vitePluginVue = {
  name: "preview",
  transform(code, id) {
    if (
      !/\/src\/views\/doc\/.*\.preview\.vue/.test(id) ||
      !/vue&type=preview/.test(id)
    ) {
      return;
    }

    let path = `.${id.match(/\/src\/views\/doc\/.*\.preview\.vue/)[0]}`;
    const file = fs.readFileSync(path).toString();
    const parsed = baseParse(file).children.find((n) => n.tag === "preview");
    const title = parsed.children[0].content;
    const main = file.split(parsed.loc.source).join("").trim();
    return `export default function (Component) {
      Component.__sourceCode = ${JSON.stringify(main)}
      Component.__sourceCodeTitle = ${JSON.stringify(title)}
    }`.trim();
  },
};

export default vitePluginVue;

5.2. 在vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const md = require("vite-plugin-markdown");
import vitePluginVue from "./plugins/vue-custom-blocks-plugin";

export default defineConfig({
  plugins: [vue(),
    md.plugin({
    mode: ["html", "vue"],
  }),
  vitePluginVue]
})

5.3. 封装Preview组件展示

<template>
  <div class="pre">
    <h2>
      {{ component.__sourceCodeTitle }}
      <Button @click="hideCode" v-if="codeVisible">隐藏代码</Button>
      <Button @click="showCode" v-else>查看代码</Button>
    </h2>
    <div class="pre-component">
      <component :is="component" />
    </div>

    <div class="pre-code" v-if="codeVisible">
      <pre class="language-html">{{ component__sourceCOde }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import Button from "../lib/button/index.vue";
import { computed, ref } from "vue";
const props = defineProps({
  component: Object,
});

const showCode = () => (codeVisible.value = true);
const hideCode = () => (codeVisible.value = false);
const codeVisible = ref(false);
</script>

<style lang="scss" scoped>
$border-color: #d9d9d9;

.pre {
  border: 1px solid $border-color;
  margin: 16px 0px 32px;
  max-width: 700px;
  min-width: 300px;
  > h2 {
    font-size: 20px;
    padding: 8px 16px;
    border-bottom: 1px solid $border-color;
    display: flex;
    justify-content: space-between;
  }

  &-component {
    padding: 16px;
  }

  &-actions {
    padding: 8px 16px;
    border-top: 1px dashed $border-color;
  }

  &-code {
    padding: 8px 16px;
    border-top: 1px dashed $border-color;

    > pre {
      line-height: 1.1;
      font-family: Consolas, "Courier New", Courier, monospace;
      margin: 0;
      background-color: #fff;
    }
  }
}
</style>

5.4. 使用Preview组件

views/doc/button/index.vue

<template>
  <div>
    <Preview :component="Button1" />
  </div>
</template>

<script setup>
import Button1 from "./Button1.preview.vue";
import Preview from "../../../components/Preview.vue";
</script>

<style lang="scss">
.jw-button + .jw-button {
  margin-left: 20px;
}
</style>

/views/doc/button/Button1.preview.vue

<preview>基础示例</preview>
<template>
  <Button />
</template>

<script setup lang="ts">
import Button from "../../../lib/button/index.vue";
</script>

现在，只要编写上面的以.preview.vue后缀的文件就行了。

  • 效果：

image.png

5.5. 高亮源代码

下载prismjs

yarn add prismjs

对Preview组件做修改

<template>
  <div class="pre">
    <h2>
      {{ component.__sourceCodeTitle }}
      <Button @click="hideCode" v-if="codeVisible">隐藏代码</Button>
      <Button @click="showCode" v-else>查看代码</Button>
    </h2>
    <div class="pre-component">
      <component :is="component" />
    </div>

    <div class="pre-code" v-if="codeVisible">
      <pre class="language-html" v-html="html" />
    </div>
  </div>
</template>
<script setup lang="ts">
import Button from "../lib/button/index.vue";
import { computed, ref } from "vue";
import "prismjs";
import "prismjs/themes/prism.css";
const Prism = (window as any).Prism;
const props = defineProps({
  component: Object,
});

console.log(props.component.__sourceCode);
const html = computed(() => {
  return Prism.highlight(
    props.component.__sourceCode,
    Prism.languages.html,
    "html"
  );
});
const showCode = () => (codeVisible.value = true);
const hideCode = () => (codeVisible.value = false);
const codeVisible = ref(false);
</script>
  • 效果

image.png

6. 去掉示例中的文件导入

image.png

6.1. 在lib目录下创建main.ts 这个也是作为之后打包上传至npm的入口

import { App } from "vue";
import JwButton from "./button/index.vue";
export {  JwButton };
const components = [JwButton];

// 全局注册主键
export function registerJwUi(app: App): void {
  for (const component of components) {
    app.component(component.name, component);
  }
}

export default registerJwUi;

6.2. main.ts中导入注册

import JwUi from "./lib/index";
app.use(JwUi);

6.3. 这样在示例中就可以直接用了/src/views/doc/button/Button1.preview

<preview>基础示例</preview>
<template>
  <jw-button />
</template>

6.4. 效果

image.png

7. 部署到github官网

7.1. 打包

yarn build

7.2. 上传至github

github创建一个新的仓库
将dist上传只仓库

7.3. 进入仓库Settings最底层

image.png

7.4. 找到GitHub Pages

image.png

7.5. 选择master分支 点击保存 链接就生成了

image.png

7.6 一键部署

创建deploy.sh文件

rm -rf dist &&
yarn build &&
cd dist &&
git init &&
git add . &&
git commit -m "update" &&
git branch -M master &&
git remote add origin git@github.com:coderyjw/jw-ui-website.git &&
git push -f -u origin master &&
cd -
echo https://coderyjw.github.io/jw-ui-website/

执行命令

sh deploy.sh

8. 上传至npm

8.1. 创建rollup.config.js配置文件

// 为了保证版本一致，请复制我的 package.json 到你的项目，并把 name 改成你的库名
import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"
import alias from '@rollup/plugin-alias'
import path from "path";
import resolve from 'rollup-plugin-node-resolve'

export default {
  input: 'src/lib/index.ts',
  output: [{
    globals: {
      vue: 'Vue'
    },
    name: 'Yjw-ui',
    file: 'dist/lib/yjw-ui.js',
    format: 'umd',
    plugins: [terser()]
  }, {
    name: 'Yjw-ui',
    file: 'dist/lib/yjw-ui.esm.js',
    format: 'es',
    plugins: [terser()]
  }],
  plugins: [
    scss({ include: /\.scss$/, sass: dartSass }),
    esbuild({
      include: /\.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015' 
    }),
    vue({
      include: /\.vue$/,
    }),
    alias({
      entries: [
        {
          find: '@', // 别名名称，作为依赖项目需要使用项目名
          replacement: path.resolve(__dirname, 'src'), 
          customResolver: resolve({
            extensions: ['.js', '.jsx', '.vue', '.sass', '.scss']
          })
        }
      ]
    }),
  ],
}

8.2. 执行命令打包

rollup -c

8.3. 效果

可以看到dist文件下有lib文件，就是打包后的文件

image.png

8.4. 上传至npm

需要先注册npm账号

npm login // 先登录
npm publish // 发布

9. 最后

ok,终于写完了😌，如果你觉得我写的不错，麻烦点个赞再走吧~

如果觉得我写的有错的，麻烦指出再点个赞鼓励一下吧😭🤗。

原文地址

文章标签：
JavaScript
前端开发
开发工具
IDE
关键词：
UI组件
vue UI
UI库
VUE.js ui
UI组件库
前端要努力QAQ
目录
相关文章
SoraLuna
|
5天前
|
缓存 搜索推荐 索引
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
在鸿蒙应用开发中，Image 组件用于加载和显示图片资源，并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。
SoraLuna
40 7
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
SoraLuna
|
7天前
|
自然语言处理 开发者
「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
本篇将详细介绍鸿蒙应用开发中的 Text 和 Button 组件。通过本篇内容，你将学习如何使用 Text 组件显示文本、格式化文本样式，以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。
SoraLuna
31 4
「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
杀死一只知更鸟debug
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用，及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板，包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
杀死一只知更鸟debug
204 3
Ant Design Vue UI框架的基础使用，及通用后台管理模板的小demo【简单】
邹荣乐
|
23天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南：常见问题（如Missing required prop: “value“）及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南：常见问题（如Missing required prop: “value“）及中文全局组件配置解决方案
邹荣乐
86 0
追逐时光者
|
27天前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
追逐时光者
96 0
那年春天
|
1月前
Element-UI组件的使用
【10月更文挑战第1天】
那年春天
32 0
。思索
|
2月前
|
JavaScript
从零开始写一套广告组件【一】搭建基础框架并配置UI组件库
其实这个从零有点歧义，因为本质上是要基于`tdesign-vue-next`来进行二次封装为一套广告UI组件库，现在让我们在一起快乐的搭建自己的广告UI库之前，先对以下内容做出共识：
。思索
71 0
从零开始写一套广告组件【一】搭建基础框架并配置UI组件库
追逐时光者
|
2月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
追逐时光者
83 2
请看我回答~
|
3月前
|
存储 搜索推荐 Java
探索安卓开发中的自定义视图：打造个性化UI组件Java中的异常处理：从基础到高级
【8月更文挑战第29天】在安卓应用的海洋中，一个独特的用户界面(UI)能让应用脱颖而出。自定义视图是实现这一目标的强大工具。本文将通过一个简单的自定义计数器视图示例，展示如何从零开始创建一个具有独特风格和功能的安卓UI组件，并讨论在此过程中涉及的设计原则、性能优化和兼容性问题。准备好让你的应用与众不同了吗？让我们开始吧！
请看我回答~
47 7
1313310884104708
|
3月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
1313310884104708
47 2

热门文章

最新文章

  • 1
    国内主流在用的10大后台UI框架，私活必备
  • 2
    UI/UE对个性化推荐的影响
  • 3
    CDP中使用YARN Web UI和CLI
  • 4
    Android UI学习 - Linear Layout, RelativeLayout
  • 5
    Windows Phone 及 Metro UI 设计讨论
  • 6
    UGUI防止穿透和判断点击的是否是UI
  • 7
    element ui el-pagination重载数据时分页不更新
  • 8
    敏捷开发一千零一问系列之二十三： UI设计怎么做到敏捷呢？（兼谈对UI热的理解）（下）
  • 9
    Android官方开发文档Training系列课程中文版：多样屏幕之实现自适应UI
  • 10
    iOS开发UI篇—IOS开发中Xcode的一些使用技巧
  • 1
    【vue的技术要点】
    86
  • 2
    【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
    504
  • 3
    在vue中，在哪个生命周期内调用异步请求？
    311
  • 4
    在vue中，Vue 的父组件和子组件生命周期钩子函数执行顺序？
    103
  • 5
    在vue中，直接给一个数组项赋值，Vue 能检测到变化吗？
    269
  • 6
    在vue中，computed 和 watch 的区别和运用的场景？
    82
  • 7
    在vue中，怎样理解 Vue 的单向数据流？
    72
  • 8
    在vue中，Class 与 Style 如何动态绑定？
    50
  • 9
    在vue中，v-show 与 v-if 有什么区别？
    44
  • 10
    在vue中，如何实现SPA单页面应用的路由管理？
    66

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Fusion Design - 企业级UI解决方案揭秘
  • Vue.js在前端服务化上的实践与探索
  • 使用TensorFlow搭建智能开发系统自动生成App UI

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    无影云桌面