组件库相关

2023-03-30
作者 wik siu jyu
~6.88K 字

一、思维整理

移动端的前端组件库可以包括许多组件，这里列出一些常见的组件：
按钮组件：用于触发操作或提交表单。
图标组件：用于显示图标。
输入框组件：包括文本输入框、数字输入框等。
列表组件：用于展示列表信息。
滚动组件：用于滚动显示大量内容。
轮播组件：用于轮播广告或图片。
弹窗组件：用于弹出提示或确认框。
标签组件：用于分类或标记信息。
搜索组件：用于搜索信息。
日期时间组件：用于选择日期时间。
下拉选择组件：用于选择下拉菜单中的选项。
滑块组件：用于选择范围或值。
表单组件：包括表单验证、提交等。
树形组件：用于显示层级结构。
下拉刷新：下拉时可以重新加载数据。
上拉加载更多：当data很多时分页适用。
头像+头像框组件：有些活动中会有不规则头像框，或者vip的特效等。
搜索文本框：带搜索按钮的文本款组件等。
再比如性能优化方面，防抖、节流等

jsbridge相关：调用相机、调用相册、分享等

组件库搭建：
展示方面：用react/vue + bootstrap4 做框架，codesandbox做代码演示，还有复制链接及效果，类似antd组件的网站。
然后使用npm包安装，引入使用。

比如说，我现在想搭一个npm包，里面包括按钮组件、搜索框组件等。
这里我就只写两个按钮组件、搜索框组件

二、npm包的开发示例

1. 安装依赖

1	npm install webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader --save-dev

2. 在项目根目录下创建一个 webpack.config.js 文件，配置如下：

在项目根目录下创建一个 webpack.config.js 文件，配置如下：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'production', // 打包模式
  entry: './src/index.js', // 入口文件
  output: { // 输出配置
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-button.js',
    library: 'MyButton',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

其中，entry 字段指定了入口文件，output 字段指定了输出配置，这里生成了一个名为 my-button.js 的文件，library 指定了模块名称，libraryTarget 指定了模块的导出方式。

3. 在 `src` 目录下创建 `index.js` 文件和 `Button.vue` 文件，分别编写代码如下：

import Vue from 'vue';
import Button from './Button.vue';

const MyButton = {
  install: function(Vue) {
    Vue.component('MyButton', Button);
  }
};

Vue.use(MyButton);

export default MyButton;

Button.vue：

<template>
  <button class="my-button" :style="{height: height, width: width}"><slot></slot></button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    height: {
      type: String,
      default: '60px'
    },
    width: {
      type: String,
      default: '80%'
    }
  }
}
</script>

<style scoped>
.my-button {
  background-color: #f0ff00;
  border: none;
  color: white;
  font-size: 16px;
}
</style>

4. 在命令行中运行以下命令打包：

1	npx webpack

5. 引用

将打包后的文件（即 my-button.js）上传到 npm 上，然后在需要使用该组件库的项目中，通过以下命令安装该组件库：

1	npm install your-package-name

在项目中使用该组件库，可以像下面这样引入：

import Vue from 'vue';
import MyButton from 'your-package-name';

Vue.use(MyButton);

之后就可以在Vue 组件中使用 MyButton 组件了，像这样：

<template>
  <div>
    <my-button>Click Me</my-button>
  </div>

三、在原有组件基础上加入新的搜索文本框组件

思路：先将新的搜索文本框组件写好并打包成一个单独的模块。然后，可以在 my-button 组件中引入新的搜索文本框组件并进行相应的配置和使用。最后，将 my-button 和搜索文本框组件打包成一个组件库并发布到 npm 上。

具体的步骤如下：

1. 编写搜索文本框组件

具体的编写就不说了，假设已经编辑好，命名为 my-input。
创建一个webpack.config.js文件，配置打包规则：

const path = require('path');

module.exports = {
  mode: 'production', // 设置为生产环境模式
  entry: './src/index.js', // 入口文件路径
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录路径
    filename: 'flow-components.min.js', // 输出文件名称
    library: 'flowComponents', // 打包生成的库的名称
    libraryTarget: 'umd', // 打包生成的库的目标环境
    umdNamedDefine: true // 是否需要命名 UMD 模块
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['css-loader', 'vue-style-loader', 'style-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue'] // 支持的文件扩展名
  }
};

这里使用了 vue-loader 处理 .vue 单文件组件，使用 css-loader、vue-style-loader 和 style-loader 处理样式文件，使用 file-loader 处理静态资源文件。设置了输出目录路径、输出文件名称、打包生成的库的名称、打包生成的库的目标环境等。

2. 在 src 目录下创建一个 index.js 入口文件，用于导出组件：

import Button from './components/Button.vue';
import Input from './components/Input.vue';

const components = {
  Button,
  Input
};

const install = function (Vue) {
  if (install.installed) return;
  Object.keys(components).forEach((name) => {
    Vue.component(name, components[name]);
  });
};

if (typeof window !== 'undefined' && window.Vue

3. 引入

1	npm install your-library-name --save

在项目中引用组件库中的组件，首先需要在代码中引入组件，比如：

1	import { Button, SearchInput } from 'your-library-name';

然后在代码中直接使用引入的组件即可：

1 2	<Button>Click me</Button> <SearchInput placeholder="Search" />

三、搭建boostrap+vue的网页端

待补充

——————————————————

- 本科及以上学历，计算机科学、软件工程或相关领域优先。
- 至少3年以上的前端开发经验，有大型项目的实际经验。
- 良好的算法，数据结构，网络，数据库基本知识。
- 深入了解HTML、CSS和JavaScript，熟悉现代前端框架和库Vue2。
- 在跨浏览器和响应式设计方面有丰富的经验，能够优化移动和桌面应用程序的用户体验。
- 具备良好的团队领导和沟通能力，能够与多个团队合作，推动项目进展。
- 对用户体验、可用性和设计有敏锐的感知力，能够将设计转化为用户友好的界面。
- 对新技术和趋势保持持续关注，有自我驱动的学习精神，愿意探索和实验新的开发方法和工具。

——————————————————

\2. 前端基础知识扎实，深刻理解Web标准并熟练运用HTML/CSS/JavaScript构建高性能web应用，熟悉ES6/ES7标准；
\3. 熟练运用主流移动端JS库和Vue开发架构深入理解其设计原理，掌握微信小程序、React或Vue技术栈最佳，有相关组件库开发经验，并熟练掌握响应式开发、多终端兼容适配；
\4. 根据业务情况，引入、使用最新前端框架，提高用户体验；
\5. 具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；
\6. 熟悉前端性能优化，对用户体验、可用性、易用性以及UCD的设计理念有一定研究；
\7. 具有良好的代码风格、接口设计与程序架构功力，有node.js/Java开发经验者优先；
\8. 熟悉Web应用系统开发，对HTTP、TCP/IP协议及web服务器等有所理解；拥有良好的安全意识，熟悉常见的网络安全攻防策略

——————————————————

\1. 全日制本科及以上学历，计算机相关专业，5年以上前端开发经验。
\2. 前端基础知识扎实，深刻理解Web标准并熟练运用HTML/CSS/JavaScript构建高性能web应用，熟悉ES6/ES7标准；
\3. 熟练运用主流移动端JS库和Vue开发架构深入理解其设计原理，掌握微信小程序、React或Vue技术栈最佳，有相关组件库开发经验，并熟练掌握响应式开发、多终端兼容适配；
\4. 根据业务情况，引入、使用最新前端框架，提高用户体验；
\5. 具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；
\6. 熟悉前端性能优化，对用户体验、可用性、易用性以及UCD的设计理念有一定研究；
\7. 具有良好的代码风格、接口设计与程序架构功力，有node.js/Java开发经验者优先；
\8. 熟悉Web应用系统开发，对HTTP、TCP/IP协议及web服务器等有所理解；拥有良好的安全意识，熟悉常见的网络安全攻防策略
\9. 了解主流前端构建技术gulp、webpack等，并能根据项目实际情况定制构建工具；
\10. 有团队精神、善于沟通、有责任心、执行能力强。

————————————————

\1. 具有八年及以上的web前端开发经验，本科及以上学历，计算机相关专业；
\2. 熟练使用Vue3/Vue3.5、flutter，全家桶，能独立开发通用组件；
\3. 熟练掌握前端语义化、模块化、性能调优、可扩展和可维护性等相关知识；
\4. 有性能优化、移动端web 经验、浏览器兼容性开发经验者优先；
\5. 熟练使用 SVN/GIT，具备良好的编程能力及较强的文档编写能力；
\6. 具备良好的编码习惯。有低代码平台开发经验者优先；
\7. 严格遵从公司的代码习惯，代码结构标准、命名规范标准、设计模式、注释标准、编码标准；
\8. 具备较强的责任心、良好的职业道德，没有个人主义，服从领导的开发安排。

————————————————

HTML/CSS/JavaScript

typescript

react

vue

webpack eslint babel

nodejs

域小🐟的私人地盘

组件库相关

一、思维整理

二、npm包的开发示例

1. 安装依赖

2. 在项目根目录下创建一个 webpack.config.js 文件，配置如下：

3. 在 `src` 目录下创建 `index.js` 文件和 `Button.vue` 文件，分别编写代码如下：

4. 在命令行中运行以下命令打包：

5. 引用

三、在原有组件基础上加入新的搜索文本框组件

1. 编写搜索文本框组件

2. 在 src 目录下创建一个 index.js 入口文件，用于导出组件：

3. 引入

三、搭建boostrap+vue的网页端

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

域小🐟的私人地盘

一、思维整理

二、npm包的开发示例

1. 安装依赖

2. 在项目根目录下创建一个 webpack.config.js 文件，配置如下：

3. 在 src 目录下创建 index.js 文件和 Button.vue 文件，分别编写代码如下：

4. 在命令行中运行以下命令打包：

5. 引用

三、在原有组件基础上加入新的搜索文本框组件

1. 编写搜索文本框组件

2. 在 src 目录下创建一个 index.js 入口文件，用于导出组件：

3. 引入

三、搭建boostrap+vue的网页端

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

3. 在 `src` 目录下创建 `index.js` 文件和 `Button.vue` 文件，分别编写代码如下：

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可