prefacio

La razón para escribir este artículo es la construcción de grabar su propio curso de una biblioteca de componentes, sino también para aquellos estudiantes que quieren escribir una biblioteca de componentes tutorial. biblioteca de componentes también escribió algún tiempo, también estableció la plataforma básica casi lo mismo, pero vistazo a su proceso de construcción no es perfecto, por lo que volver de nuevo organizar sus propias ideas, por lo que su tecnología tiene salidas.

Mirada bajo el efecto ninecat-ui.github.io

código fuente de la biblioteca de componentes ninecat-ui (Si te sientes bien, le puede dar un comienzo oh)

Aquí Insertar imagen Descripción

Esto es lo que escribo en esta biblioteca de componentes de interfaz de usuario alguna Todolsit, ha completado la función que se ha marcado, y si usted está interesado y que pueden funcionar juntos para completar sin terminar.

Costumbre estructura de directorios de documentos
Por MD demostración componente para mostrar
Integrado Travis CI
Prueba Integrada Unidad
codecov integrada
construir de forma automática de componentes de documentos
Según la etiqueta publicar automáticamente NPM
DocSearch integrada
codepen integrada
temas de color personalizada
Multi-idioma internacionalización
JavaScript y el desarrollo mecanografiado de uso mixto

Bueno, vamos a empezar!

Encuentra el prototipo biblioteca de componentes derecha

Antes de empezar a escribir biblioteca de componentes, es necesario tener un dibujo bueno prototipo. El más popular en sus países y Ant Elemento de diseño de interfaz de usuario cuenta con una biblioteca componente correspondiente, si desea Práctica con la mano, se puede utilizar directamente para su uso.

Aquí hay dos enlaces de descarga de los correspondientes recursos de la biblioteca de componentes de interfaz de usuario para el final.

https://element.eleme.cn/2.0/#/zh-CN/resource

https://ant.design/docs/spec/download-cn

Yo uso Rsuite biblioteca de componentes de interfaz de usuario, me siento muy buen equipo de conciencia.

Con un prototipo que puede empezar a trabajar otra vez!

Inicializar el proyecto

Ya que parte de cero para construir una biblioteca de componentes que ciertamente no pueden ser utilizados para construir el andamiaje, no se llama a partir de cero, y dirigir toda npm initiniciar el proyecto.

mkdir ninecat-ui
cd ninecat-ui
npm init

A continuación se inicializa al proyecto un éxito, y buscar a continuación para instalar las dependencias necesarias.

Para su instalación depende

Con base en mi experiencia en la instalación de sus dependencias, el dependiente se divide en los siguientes tipos: dependencia Core, dependencias de construcción, herramientas dependientes. Por supuesto, esto es de acuerdo a la funcionalidad de distinguir y clasificar aspecto más profesional https://zhuanlan.zhihu.com/p/29855253

Aquí se utiliza el hilo para instalar dependencias. Ahora instalar las dependencias que no distingue qué tipo dependen directamente yarn adden la línea, y así construir una buena acumular de nuevo distinción pertenece a la clase de dependencia, y luego reconstruirlo package.json archivos en package.json documentación más detallada puede referirse a https: // docs.npmjs.com/files/package.json

A las necesidades del proyecto VUE básicos acerca de estas dependencias:
Vue, webpack, webpack-cli, webpack-dev-servidor, @ babel / Core, babel-Loader, CSS-Loader, HTML-webpack-plugin, VUE-Loader
, VUE-Plantilla -compiler

Escribir el código más simple

La dependencia instalado, tenemos que definir lo que la plantilla de proyecto HTML, documentos de importación y VUE página de inicio directorio raíz de documentos del nuevo index.html, nuevo directorio src, crear un index.js la src y index.vue.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ninecat-ui</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

index.vue

<template>
  <div>Hello Ninecat-ui</div>
</template>

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

index.js

import Vue from 'vue'
import App from './index.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

Bueno contenido, ahora tenemos que mirar a una configuración sencilla webpack para que el proyecto en marcha y funcionando.

Añadir la configuración más sencilla webpack

Crear un directorio de construcción con el directorio, añadir un archivo de configuración que webpackwebpack.config.base.js

'use strict'
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, '../src/index.js'),
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
    }),
    new VueLoaderPlugin(),
  ]
}

Si algunos estudiantes todavía no entiende estas configuración básica, debe buscar a través de lo webpack los documentos oficiales, oh, dado el vínculo: https://www.webpackjs.com/

Ser configurado como se ha descrito anteriormente, un proyecto básico VUE está construida casi, entonces tenemos que configurar el script de inicio del proyecto. Package.json sigue en el que las secuencias de comandos:

"scripts": {
    "start": "webpack-dev-server --config build/webpack.config.base.js"
 },

Por último, visita nuestra estructura de directorios:

Corremos el proyecto:yarn start

OK, aquí hay un vue construcción básica de un proyecto bueno, podemos empezar a construir detrás de los componentes.

La preparación del primer componente

En primer lugar en la raíz de un nuevo packagesarchivo, y luego crear un saludo en la siguiente carpeta, abra un componente de escritura. Componentes papel es simplemente la de un simple saludo de montaje, pasando el nombre se puede visualizar Hola, página xxx.

Aquí echamos un vistazo a la estructura de directorios:

Ahora tengo que escribir sobre nuestro componente Hola.

paquetes / hola / src / index.vue

<template>
  <div>
    <h2>Hello, {{name}} ！</h2>
  </div>
</template>

<script>
export default {
  name:'Hello',
  props:{
    name:{
      type:String,
      default:'Ninecat UI'
    }
  }
}
</script>

paquetes / hola / index.js

import Hello from './src/index.vue'

// install 是默认的方法,供按需引入。
// 当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。

Hello.install = function(Vue){
  Vue.component(Hello.name, Hello)
}

export default Hello

Componentes de carpetas razón de una escritura de este tipo es permitir que los componentes tienen una exportación unificada, carpeta del directorio src bajo cada componente se puede extender a otros componentes funcionales.

src / index.vue

<template>
  <div>
    <Hello 
      :name="name"
    />
  </div>
</template>

<script>
import Hello from '../packages/hello'
export default {
  name:'App',
  components:{
    Hello
  },
  data:function(){
    return {
      name:'Terence'
    }
  }
}
</script>

OK, aquí contamos encapsula un simples componentes Hola, pero ahora no hemos logrado después de que los componentes empaquetados con NPM instalar esta biblioteca de componentes, y luego de referencia dentro de los componentes Hola, por lo que se requiere lo siguiente para exportar la configuración de configuración y el paquete.

Configuración de exportación y embalaje

componente bien escrito requiere una exportación unificada, ahora es un componente, estará detrás de muchos de los componentes, por lo que necesitamos para armonizar el componente de exportación.

paquetes / index.js

import Hello from './hello'

const components = {
  Hello
}

const install = function (Vue) {
  Object.values(components).forEach(component => {
    Vue.component(component.name, component);
  })
}

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

export default {
  install,
  Hello
}

Configuración del paquete
build / webpack.config.build.js

'use strict'
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')


module.exports = {
  mode: 'production',
  entry: {
    'ninecatui': './packages/index.js' // 入口文件
  },
  output: {
    path: path.resolve(__dirname, '../package'), // 出口目录
    publicPath: '/package/',
    library: 'ninecatui', // 包名
    libraryTarget: 'umd',
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
}

Aquí está el paquete básico que, a prueba de forma local.

En package.jsonla adición de una secuencia de comandos de envasado,

"build": "webpack --config build/webpack.config.build.js"

Buscamos construir el proyecto:npm run build

Jugará un carpeta del paquete, citamos la biblioteca de componentes.

Modificar src / index.js

import Vue from 'vue'
import App from './index.vue'
import Ninecatui from '../package/ninecatui'

Vue.use(Ninecatui)

new Vue({
  render: h => h(App)
}).$mount('#app')

Modificar src / index.vue

<template>
  <div>
    <Hello 
      :name="name"
    />
  </div>
</template>

<script>
export default {
  name:'App',
  data:function(){
    return {
      name:'Ninecat UI'
    }
  }
}
</script>

Al igual que accesible.

A continuación vamos a tratar de empaquetar NPM, y luego instalado localmente para hacer referencia a la biblioteca de componentes.

comunicado de la NGP

prueba de empaquetado local

Modificar un archivo package.json archivo de entradas

"main": "package/ninecatui.js",

A continuación, npm packpuede reproducir un ninecatui-1.0.0.tgzarchivo.

Este archivo se puede instalar a través de la NGP, con el fin de prueba, podemos probar directamente en el proyecto actual.

Antes de montar necesidad NPM para cambiar el aspecto package.jsondel nombre, o entrará en conflicto en el momento de la instalación, que se

"name": "ninecatui"

cambio

"name":"ninecatui-test"

directa yarn add ./ninecatui-1.0.0.tgzonpm install ./ninecatui-1.0.0.tgz

La razón para el aumento ./se debe a la ruta local para la instalación es un parámetro.

Si el efecto anterior, felicidades por su instalación local tuvo éxito, vamos a cambiarlo referencias, para ver si la aplicación se puede utilizar normalmente.

modificaciónsrc/index.js

import Vue from 'vue'
import App from './index.vue'
// 修改引用
import Ninecatui from 'ninecatui'

Vue.use(Ninecatui)

new Vue({
  render: h => h(App)
}).$mount('#app')

Niza, el uso normal, instrucciones de uso son empaquetados localmente normal. Vamos a publicar a la NGP.

Publicar para NGP

En la primera NPM para registrar una cuenta en el sitio web oficial.

Bajo el directorio raíz del proyecto, cuenta de acceso NPM, introduzca su nombre de usuario, contraseña, correo electrónico.

npm login

Como la información que parece mostrar que inicie sesión en el éxito.

A continuación, ejecute npm publisha

La figura, ninecatui-testes nuestro paquete.

paquete de prueba de verificación de la NGP

Nos Vue-CLI crear un proyecto vue y, a continuación, instalar introducido por la NGP.

directo

vue create hello-world

entonces

yarn add ninecatui-test

retoques directa src/main.jsysrc/App.vue

src / main.js

import Vue from 'vue'
import App from './App.vue'
import Ninecatui from 'ninecatui-test'

Vue.use(Ninecatui)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

src / App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Hello 
      :name="name"
    />
  </div>
</template>

<script>

export default {
  name: 'App',
  data:function(){
    return {
      name:'Ninecat UI'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Felicidades, el primer paquete NPM publicado correctamente. NPM publicar correctamente tomado la espalda un pequeño paso menos, sino también continuar optimizando la ingeniería del proyecto.