heiha-ui v0.1.0

heiha-ui

Use

npm i heiha-ui

全局注册

import 'heiha-ui/dist/css/index.css';
import Heiha from 'heiha-ui';

Vue.use(Heiha);

按需加载

import 'heiha-ui/dist/css/card.css';
import { Card } from 'heiha-ui';
Vue.use(Card);

设计流程

1. vue-cli创建项目

vue create heiha-ui

2. 项目结构重整

// 2.1 项目根目录创建packages 存放组件
// 2.2 将src目录名修改为examples
// 2.3 examples目录至存放App.vue及main.js入口文件
// 2.4 vue.config.js配置项重置emtry入口
/* 目录概览
 - dist/
  -- css/
  --*.js
 - examples/
  -- App.vue 
  -- main.js
 - packages/
  -- css/
  -- lib/
    --- component/
      ---- src/
      ---- index.js
    ---index.js
 - public/
  -- index.html
*/
// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js', // 入口文件
      templage: 'public/index.html', // 模板文件
      filename: 'index.html', // 模板名称
    },
  },
};

3. webpack打包umd.js

npm i vue-loader -D

const path = require('path'); // 文件路径
const glob = require('glob'); // 匹配文件名
const { VueLoaderPlugin } = require('vue-loader');

const list = {};

async function makeList(dirPath, list) {
  const files = glob.sync(`${dirPath}/**/index.js`);
  for (let file of files) {
    const output = file.split('/[/.]/')[2];
    list[output] = `./${file}`;
  }
}

makeList('packages/lib',list)

module export = {
  emtry : list,
  mode: 'development',
  output: {
    filename:'[name].umd.js',
    path: path.resolve(__dirname,'dist')
    library:'mui',
    librarytarget:'umd'
  },
  plugins:[
    new VueLoaderPlugin()
  ],
  module:{
    rules:[
      {
        test: /\.vue$/,
        use:{
          loader:'vue-loader'
        }
      }
    ]
  }
}

4. gulp打包css

npm i gulp gulp-sass gulp-minify-css sass -D

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass')); // sass转css
const minifyCss = require('gulp-minify-css'); // 压缩css

gulp.task('sass', async () => {
  return gulp
    .src('packages/css/**/*.css')
    .pipe(sass())
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/css'));
});

5. package.json设置打包命令

{
  "name": "heiha-ui", // 名称
  "version": "0.1.0", // 版本号
  "description": "自建vue组件库", // 描述
  "main": "dist/index.umd.js", // 入口文件
  "keywords": ["heiha-ui", "自建vue组件库"], // 关键词
  "author": "cookchopper", // 作者
  "files": ["dist", "packages"], // npm上传文件
  // "private": true, 公共组件库此处要去掉
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "npm run build:js && npm run build:css",
    "lint": "vue-cli-service lint",
    "build:js": "webpack --config ./webpack.components.js",
    "build:css": "npx gulp sass"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "gulp": "^4.0.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^5.1.0",
    "node-sass": "^4.12.0",
    "sass": "^1.45.2",
    "sass-loader": "^8.0.2",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.11",
    "webpack-cli": "^4.9.1"
  }
}

6. 上传npm

npm login username password npm publish