Yutons-ui NPM | npm.io

yutons

项目初始化

yarn install

编译运行热部署开发环境

yarn serve

编译打包生产环境

yarn build

Lints and fixes files

yarn lint

封装成UI组件库

步骤1：调整目录

|-- examples // 原 src 目录，改成 examples 用作示例展示
|-- packages // 新增 packages 用于编写存放组件

步骤2：配置项目以支持新的目录结构

// 我们通过步骤二的目录改造后，会遇到两个问题。 
// 1、src 目录更名为 examples ，导致项目无法运行
// 2、新增 packages 目录，该目录未加入 webpack 编译
// 在根目录下新建一个vue.config.js 配置文件
// 重新配置入口，修改配置中的 pages 选项
// 新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。 
// 这里使用 pages 修改入口到 examples
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages: {
    // 修改项目入口文件
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  }
})

// 注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。
// 支持对 packages 目录的处理，修改配置中的 chainWebpack 选项
// packages 是我们新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持。
// chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  pages: {
    // 修改项目入口文件
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    // @ 默认指向 src 目录，这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
      .set('@', path.resolve('examples'))
      .set('~', path.resolve('package'))

    config.module
      .rule('js')
      .include.add(path.resolve(__dirname, 'packages')).end()
      .include.add(path.resolve(__dirname, 'examples')).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
})

步骤3：编写自定义组件

在packages中分别创建component1、component2组件

|-----packages
  |-----index.js
  |------component1
      |-----src
          |-----main.vue
      |-----index.js
   |------component2
      |-----src
          |-----main.vue
      |-----index.js
具体内容参考代码

步骤4：在examples中引入组件

// examples/main.js
// 导入组件库
import yutonsUI from '../packages/index'
// 注册组件
Vue.use(yutonsUI)

<!--examples/App.vue-->
<template>
  <div id="app">
    <component1></component1>
    <component2></component2>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {}
}
</script>

<style lang="scss">

</style>

步骤5：发布到npm

# .npmignore添加要忽略提交到npm的文件或目录

# package.json
  "main": "lib/yutons-ui.umd.min.js",
  "author": {
    "name": "雨桐"
  },
  "scripts": {
    # 略 
    "lib": "vue-cli-service build --target lib --dest lib packages/index.js"
  },
# 登陆npm
# 首先确保切换会npm镜像源
npm config set registry https://registry.npmjs.org

# 打包
npm run lib
# 登陆(输入用户名、密码、邮箱、邮箱验证码)，发布
npm login
npm who
# 发布
npm publish