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


    开篇-环境配置

    环境配置:

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

    npm install -g @vue/cli

    官网相关说明:
    image.png

    配置预选项:

    后来后悔自己加上Linter/Formatter了
    image.png

    选版本号:3.x

    image.png

    选css扩展语言:dart-scss

    《为什么选dart-scss?》

    • dart-scss比node-scss快很多(node-scss基于ruby的,运行速度很慢)
    • 后续更新的功能也都加到了dart-scss中,是在一直维护、最新的了。

    image.png

    代码格式:eslint+prittier

    image.png

    保存的时候校验,commit的时候修复。
    image.png

    单元测试:mocha+chai

    Jest缺点:

    内部都是模拟dom,没法计算渲染到页面后真实的样式。
    image.png

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

    比放在package.json中更加便于管理吧。
    image.png

    创建成功:

    image.png

    安装后启动项目:

    启动项目报错:

    image.png

    解决方案:

    • 切换镜像重新安装NPM包依赖
    • 比如,更新npm:npm i -g npm
    • 把package-lock.json锁文件删掉
    • 重新安装(这里应该就可以了,不可以继续走下边)
    • 安装后把警告解决一遍,更新相关依赖版本号。(依赖信息如下,相关文档见这里

    image.png

    启动成功

    image.png

    目录规划:

    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 // 单元测试

  • 相关阅读:
    leetcode167 Two Sum II
    leetcode18 4Sum
    leetcode15 three sum
    leetcode-1-Two Sum
    SQL优化——select
    Hadoop 集群搭建
    虚拟机中的两台主机怎么相互拷贝文件
    doker5
    docker4
    docker3
  • 原文地址:https://www.cnblogs.com/padding1015/p/13991906.html
Copyright © 2020-2023  润新知