isNealyang

从零实现一套属于自己的UI框架-发布到npm

汤小梦

https://juejin.im/post/5e200ee86fb9a02fdd38986d

不知不觉马上就要放假了，写一篇文章祝愿 2020 越来越好！

如今前端工程师的要求越来越高了，需要掌握的技术点越来越多了，会一些基本的前端技能完全适应不了快速变化的前端领域了。接下来我将从零实现一个自己的UI组件库并发布到npm上，提供给需要的朋友参考也总结下自己对封装组件的理解方便以后复习。本项目以button按钮为例，详细的记录一下封装一个Button UI组件每一个步骤以及需要注意的地方：

效果

需要技能

需要掌握 Vue 的基本语法
组件之间的通信
插槽的用法
vue-cli3 创建项目、打包
npm & git 的用法

创建项目

检查 node 环境配置

先本地全局安装node环境，vue的运行是依赖于node的npm的管理工具来实现的，node下载地址。下载好node之后，打开cmd管理工具，输入node -v，回车，查看node版本号，出现版本号则说明安装成功，注意：node 的版本要在 8.9 或更高版本 (推荐 8.11.0+)

    node -v  npm -v

Vue 版本

关于旧版本

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它, Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。

安装新版本

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

查看版本

    vue --version | vue -V

创建项目

    vue create mc-ui
    OR
    vue ui 也可以使用UI图形化界面创建项目

注意：由于我们是开发一个第三方依赖库，我们选择 Manually select features。

选择那些特性需要安装在项目中

     (*) Babel
     ( ) TypeScript
     ( ) Progressive Web App (PWA) Support
     ( ) Router
     ( ) Vuex
     (*) CSS Pre-processors
     (*) Linter / Formatter
     ( ) Unit Testing
     ( ) E2E Testing

系统默认的包含了基本的 Babel + ESLint 设置的 preset，我们只需要选择CSS配置。移动键盘上下键选择需要的特性，按下键盘空格键即可选中

安装哪一种 CSS 预处理语言

      Sass/SCSS (with dart-sass)
      Sass/SCSS (with node-sass)
      Less
      Stylus

由于Element UI中的样式采用Sass，所以我们选择第一项即可为什么不选择第二项呢？因为dart-sass比node-sass更好下载

选择代码风格

      ESLint with error prevention only
      ESLint + Airbnb config
      ESLint + Standard config
      ESLint + Prettier

因个人喜好选择即可，我比较喜欢第三种

那种方式进行代码格式检测

     (*) Lint on save
     ( ) Lint and fix on commit

选择Ctrl+S保存时检测代码格式即可

配置文件生成方式

      In dedicated config files
      In package.json

因个人喜好，我比较喜欢选择第二种

是否保存预配置

    Save this as a preset for future projects? (y/N)

看项目需要，我这里选择 N。回车后，系统会自动帮我们把选择的配置集成到模板中，然后生成一个完整的项目。

核心逻辑

我们大致按照Element UI的源码目录进行我们自己的UI库项目开发。所以删除系统自动为我们创建的src、assets等目录，在根目录中创建一个packages目录用来存放我们要开发的UI组件；在根目录创建一个test目录用于测试我们自己开发的UI组件。由于我们更改了原项目的目录结构，使得系统本地运行以及打包找不到对应的目录，我们需要在项目的根目录中创建一个vue.config.js文件夹手动的去修改webpack配置，使得系统本地运行和打包正常。

    // vue.config.js
    const path = require('path');
    module.exports = {
        pages: {
            index: {
                entry: 'test/main.js',
                template: 'public/index.html',
                filename: 'index.html'
            }
        },
        chainWebpack: config => {
            config.module
            .rule('js')
            .include.add(path.resolve(__dirname, 'packages')).end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                return options;
            })
        }
    }

基础样式

基础的实现

从零实现一套属于自己的UI框架-发布到npm

效果

需要技能

创建项目

核心逻辑

基础样式

你可能感兴趣的:(从零实现一套属于自己的UI框架-发布到npm)