Hand in hand to take you to a VUE component library!

At the forefront of

At present, we can access to modular component library is really countless, especially vUE related that is a lot of, such as Element, iView and so on, although there are many, but the wheels are many, it is not easy to say whether they are suitable for themselves, just like buying clothes, although there is a good clothes, But it seems unable to accommodate their own fat body that can only be frustrated. Of course, at this time, it is so important to measure! Today, we will customize our own vUE component library from scratch.

start

First of all, the way to write a component library is just that, but it is important for the colleagues who write the component library to write a complete set of documentation. Through various ways to learn, I am familiar with three:

• Storybook is sure to be familiar with react developers, but it’s great news that vUE has been supported since v3.2.
• Vue-mark-down uses this to demonstrate code cases in Markdown, as well as code presentations.
• Docsify is a library that generates doc documents quickly and is only recently known.

Project initialization

To get started, we need to create an empty VUE project from which we can start writing the next component library!

NPM I -g vue-cli // YARN add global vue-cli vue init webpack lyuI //(lyuI) Can be changed to your name at willcd lyui
npm run dev
Copy the code

Not surprisingly, open your browser: http://localhost:8080 and you’ll see the following:

Component library structure

The rest of the structure will be illustrated with a simple button component! All components are placed inside SRC > Components, and each component creates a new directory, such as the button component, with the following structure:

src/components/index.js

import Button from './button'

const components = {
  Button
}

const install = function (Vue) {
  if (install.installed) return
  // components.map(component => Vue.component(component.name, component))
  Object.keys(components).forEach(key= > {
    Vue.component(components[key].name, components[key])
  })
}

if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue)
}

constAPI = { install, ... components }export default API
Copy the code

src/components/button/index.js

import Button from './src/button.vue'
Button.install = function (Vue) {
  Vue.component(Button.name, Button)
}
export default Button

Copy the code

src/components/button/src/button.vue

<template>
  <button>
    <slot></slot>
  </button>
</template>
<script>
export default {
  name: 'ly-button'
}
</script>

Copy the code

Of course, my Button component here is just a basic architecture.

Component library references

There’s a button component on there, and of course we’re going to use it in our project, and I don’t know if you remember the use of element, but we have a similar use here.

SRC /app.js add the following code:

import lyui from './components/index'
Vue.use(lyui)
Copy the code

Now our project has not been published to NPM, so it is a simple reference within the project. After we publish to NPM, we can use the same method as Element. The UI library is already being referenced in the project and I can’t wait to test it out. src/docs/test.md

Thoroughly remould oneself

The house has been bought, but we can’t live in the blank directly. Next, we will simply decorate it together, with various materials, including SCSS, CSS and postCSS. It depends on my personal preference. Because it’s not very customizable. src/components/button/button.scss

.ly-button{
  border:none;
  padding:5px 15px;
  background:#41B883;
  color:#fff;
}
Copy the code

src/components/index.scss

@import './button/src/button.scss'
Copy the code

src/main.js

import './components/index.scss'
Copy the code

Above we simply write a button style and reference it in main.js. Is that enough? The answer is no, because above our style is using SASS, however, our project does not have any about sASS loader, this is simple, we add a SASS loader not just

cnpm install --save-dev sass-loader node-sass  
Copy the code

• As sas-Loader is dependent on Node-sass, here is a friendly reminder. In general, neither NPM nor YARN can install Node-sass smoothly. The only way to install Node-sass in one step is to use CNPM on Taobao.

npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

After installing sass-loader and Node-sass, restart the service directly to see that the added style has taken effect.

Packaging releases

When a component library is written, it must eventually be packaged and distributed, otherwise it will be meaningless. Create three configuration files: config/package.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    'lyui': './src/components/index.js'
  },
  output: {
    path: path.resolve(__dirname, '.. /package'),
    publicPath: '/package/'.library: 'lyui'.libraryTarget: 'umd'.umdNamedDefine: true
  },
  externals: {
    vue: {
      root: 'Vue'.commonjs: 'vue'.commonjs2: 'vue'.amd: 'vue'}},resolve: {
    extensions: ['.js'.'.vue']},module: {
    loaders: [{
      test: /\.vue$/.loader: 'vue-loader'.options: {
        loaders: {
          css: 'vue-style-loader! css-loader'.sass: 'vue-style-loader! css-loader! sass-loader'
        },
        postLoaders: {
          html: 'babel-loader'}}}, {test: /\.js$/.loader: 'babel-loader'.exclude: /node_modules/
    }, {
      test: /\.css$/.use: [
        'style-loader'.'css-loader'.'autoprefixer-loader'] {},test: /\.(gif|jpg|png|woff|svg|eot|ttf)\?? . * $/.loader: 'url-loader? limit=8192'}},plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
}

Copy the code

config/package.div.config.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./package.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractScss = new ExtractTextPlugin('/lyui.min.css')

module.exports = merge(baseWebpackConfig, {
  output: {
    filename: '[name].js'
  },
  module: {
    loaders: [{
      test: /\.scss$/i.loader: extractScss.extract(['css-loader'.'sass-loader'}}]]),plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
    extractScss
  ]
})

Copy the code

config/package.prod.config.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const config = require('.. /config')
const baseWebpackConfig = require('./package.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractScss = new ExtractTextPlugin('/lyui.min.css')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  output: {
    filename: '[name].min.js'
  },
  module: {
    loaders: [{
      test: /\.scss$/i.loader: extractScss.extract(['css-loader'.'sass-loader'}}]]),plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'}}),//new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      uglifyOptions: {
        ie8: false.output: {
          comments: false.beautify: false,},mangle: {
          keep_fnames: true
        },
        compress: {
          warnings: false.drop_console: true
        }
      }
    }),
    extractScss,
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap ?
        {
          safe: true.map: {
            inline: false}}, {safe: true}}),new CopyWebpackPlugin([
      // {output}/file.txt
      {
        from: `./src/components`.to: `./components`}])]})Copy the code

Next you need to add three scripts to package.json

"package:dev": "webpack --config build/package.dev.config.js"."package:prod": "webpack --config build/package.prod.config.js"."package": "npm run package:prod && npm publish && npm run build"
Copy the code

And add mian

"main": "package/lyui.min.js".Copy the code

Finally, you need to reference index.scss in SRC /components/index.js

import './index.scss'
Copy the code

npm run package   \  npm run package:prod
Copy the code

After executing the above command, the package directory is generated, which contains all the files that have been packaged.

Document writing

The above introduction so much, finally write out things only you can understand, but the user is a face of confusion, at this time a good document is particularly important, next to introduce today’s protagonist: Docsify

Install Dosify globally

npm i docsify-cli -g
Copy the code

Initialize docsify

docsify init ./docs
Copy the code

Start the document Server

docsify serve ./docs
Copy the code

After the successful launch, you can directly open: http://localhost:3000 the following many configuration things here is not tired of talking about, docsify.js.org/, we check the document, and configuration is very simple!

At the end

Although wrote a lot of this kind of technical article, but so far has not written a real sense of their own component library, it is ashamed, I hope we can use this article in practice, the real sense of learning to use!