@ylbweb/yj-ui v0.0.1

#1 创建项目目录 example 使用案例目录 lib 输出包目录 输出包目录中包含组件库导出的 CSS 文件和 lavaScript 文件，也包括每个组件自身的样式和 JavaScript 文件用于按需加载的处理，复杂的组件库可以导出多套模块化结构，比如一套.esm.js，一套.cjs.js。 packages 组件源代码目录

src 源代码目录 源代码目录是项目开发阶段的主要使用目录，所有的主逻辑，导出逻辑等内容，都需要在源代码文件夹中处理，还可能会在其中创建 utils 等工具文件，在 example 中通常会直接引用 src 中导出的对象作为测试环境使用。

#2 开发环境构建

##安装依赖

npm i webpack webpack-cli webpack-dev-server -D
npm i html-webpack-plugin -D

##安装 vue 环境依赖

npm i vue -D
npm i vue-loader -D
npm i vue-template-compiler -D

##webpack.dev.js 中配置 vue

module: {
    rules: [
        {
            test: /\.vue$/,
            use: {
                loader: 'vue-loader',
            },
        },
    ]
}

##安装样式预处理

npm i sass sass-loader -D
npm i style-loader css-loader -D

webpack.dev.js 中配置 scss

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                { loader: 'style-loader' },
                { loader: 'css-loader' },
                { loader: 'sass-loader' },
            ],
        },
    ]
}

#3 组件样式规范定义 通过这么多 scss 的基础变量定义，目的仅仅是做全局的样式区格的约束，当然目前定义的结构只代表大概思路，并不能完全作为组件库的样式规则进行约束使用，所以真正开发组件库的时候，定义样式规则约束，大多数时候是通过预处理器进行设置的，其定义后任何开发者做文组件开发时都需要使用该风格定义组件。

为什么将 CSS 设计在 S 外部 由于项目是使用 webpack 打包构建工具进行构建项目的，其 CSS 的提取工具并不能将自由度完全交给开发者来进行构建，所以开发者无法随意的定义 CSS 生成文件的输出目录，文件名称以及构建过程等内容，所以通常我们把 CSS 样式单独设计出来，后期使用专门的 CSS 打包构建工具单独构建 CSS 这样可以更加灵活的定义全局的样式系统。 I

调试阶段的注意事项 在调试阶段，所有的样式都只能使用 index.scss 进行加载，并且调试阶段采用的并不是构建之后的文件结构进行加载，所以调试阶段使用的 exmaple 项目仅仅是在项目内部调试使用，后续还需要进行 pack 操作发布再外进行调用。

#4 生产环境构建 通过 webpack 构建 js 通过 gulp 构建 css

生产环境的构建目的是输出一份不受限于任何项目结构的静态组件资源，该资源支持全量和按需导入的方式提供给开发者们使用，这样开发者便无需将我们的组件库代码加载到其项目的 src 目录下，实现对项目扩展的同时又能提供灵活的运用方式。

在构建项目的过程中，我们发现所有的样式文件都不是在组件库内部代码引入的，所以构建项目后生成的组件库代码并没有 css 样式，这是因为为了极致的精简组件库，我们希望每一个单独的组件都会对应自己的单独样式，这样我们在构建组件库的时候功能代码和样式代码使用两种方式单独构建才能让组件库有更加灵活的主观选择。 所以我们通常都会在组件库项目中使用 webpack 之外的脚手架进行样式构建，比如 gulp。

使用 gulp 构建 CSS 及其原因 gulp 是一套基于 stream 的构建系统，他由于配置简单，速度快深受很多开发者的追捧，尤其是在 webpack 没有流行的时代，gulp 相当于是当时打包构建工具的王者。在 webpack 出现后，gulp 仍然因为其自身的特色在研发层面被大量的使用。

之所以使用 gulp 来构建 css 样式是因为 webpack 是一个以 lavaScript 为核心的构建工具，所以在构建时虽然可以通过插件提取 css 但是必须基干 lavaScript 文件作为入口，所以这种操作是很受限制的，在构建 UI 框架的过程中使用 gulp 可以大大降低维护样式的成本。

#gulp 核心依赖
npm i gulp gulp-cli -D
#gulp 的 sass 库
npm i gulp-sass gulp-sass-glob -D
#sass 核心库安装
npm i sass node-sass -D
#postcss 核心库
npm i gulp-postcss postcss cssnano autoprefixer -D

当项目构建步骤完成后，需要在项目的 package.json 中追加一些配置，这里最重要的一个配置就是 peerDependencies。

由于我们开发的框架是基于 Vue 框架运行的 UI 组件库，所以在安装组件库时必须确保已经安装了 vue 框架，为了确保开发者可以明确知道我们的 UI 库是依赖 Vue 框架的，这里我们可以通过 peerDependencies 指定 vue 的依赖包，指定后该项目若作为依赖被其他开发者安装，开发者在安装时控制台会提示该项目必须依赖其他安装包，提示开发者安装所需要的安装包

#5 本地发布 在本地打包前，我们需要继续修改 package.json 文件在其中增加如下内容(不要将注释放在 package.json 中) //修改入口文件为 lib 下的构建后后组件代码

{
    "main": "lib/index.js",
    //构建后公开的文件夹，隐藏开发时的配置信息
    "files": ["lib", "src", "packages", "example"]
}

开始打包

npm version patch -m '构建本地测试包'
npm pack

#6 发布到镜像源

npm pack
npm login
npm publish
或
npm publish --access public

#7 项目中使用 按需引入 使用项目中需要安装插件 babel-plugin-compentent

npm i babel-plugin-compentent -D

配置.babel.config.js 文件的 plugins

module.exports = {
    plugins: [
        'component',
        {
            //设置按需加载的包名
            libraryName: 'yjui',
            //设置样式库所在的目录名称
            styleLibraryName: 'styles',
        },
    ],
}

全量引入

import yjui from 'yjui'
app.user(yjui)

#8 使用文档构建 storybook vuepress

#9 多项目管理 lerna 负责打包发布 yarn 负责依赖管理

#10 代码规范 vscode 中安装插件 eslint 和 prettier 首选项——》设置 中搜索 format on save，打勾选择 首选项——》设置 中搜索 default formatter，选择 prettier 首选项——》设置 中搜索 use editor config，取消打勾

项目中安装配置 eslint 安装 yarn add eslint -D 配置.eslintrc.js

项目中安装配置 prettier 安装

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

配置.prettierrc