• 环境配置:

    使用vue-cli搭建项目框架,需要用vue3的话,得先把vue-cli的版本升级到vue-cli@5以上

    npm install -g @vue/cli

    官网相关说明:
    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    配置预选项:

    后来后悔自己加上Linter/Formatter了
    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    选版本号:3.x

    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    选css扩展语言:dart-scss

    《为什么选dart-scss?》

    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    代码格式:eslint+prittier

    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    保存的时候校验,commit的时候修复。
    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    单元测试:mocha+chai

    Jest缺点:

    内部都是模拟dom,没法计算渲染到页面后真实的样式。
    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    配置文件位置:独立配置文件

    比放在package.json中更加便于管理吧。
    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    创建成功:

    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    安装后启动项目:

    启动项目报错:

    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    解决方案:

    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    启动成功

    【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划-LMLPHP

    目录规划:

    docs // 文档
       - (这里尝鲜用vitepress,推荐稳定的vuepress,只不过打包速度慢,vitepress只起了服务没打包的过程所以速度很快)
    src
       - example // 组件使用demo
          - button.vue
       - app.vue
       - main.js
    packages // 组件包源码
       - button
          - src
             - button.vue
             - button-else.vue
          - index.js // 单组件入口
       - index.js // 入口
    style // 组件样式
       - common // 公共样式
       - mixins // 混合方法
       - button.scss // 单个组件样式
    test // 单元测试

    11-17 17:20