vue-cli3 encapsula los componentes escritos por usted mismo en archivos js importables

Primero use vue-cli para crear un proyecto predeterminado. El
directorio del proyecto actual se ve así:

Primero, debe crear un directorio de paquetes para almacenar componentes
y luego cambiar el directorio src a ejemplos como ejemplo

2. Al modificar la configuración e
iniciar el proyecto, el archivo de entrada predeterminado es src / main.js. Después de
cambiar el directorio src a ejemplos, debe volver a configurar el archivo de entrada
para crear un  archivo vue.config.js en el directorio raíz. 

// vue.config.js

module.exports = {
  // 将 examples 目录添加为新的页面
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

Después de completar este paso, puede iniciar el proyecto normalmente.vue
-cli 3.x proporciona comandos para construir la biblioteca , por lo que no es necesario configurar el paquete web para el directorio de paquetes.

3.
Antes de desarrollar componentes , se ha creado un directorio de paquetes para almacenar componentes. En
este directorio se almacena un directorio de desarrollo separado para cada componente, y todos los componentes se integran con un index.js, y
cada componente debe clasificarse como una exportación separada. En el directorio, contiene el directorio de código fuente del componente src e index.js para una fácil referencia externa.
Aquí está el componente textarea como ejemplo. La estructura completa del directorio de paquetes es la siguiente:

textarea/src/main.vuees el archivo de desarrollo del componente y el código específico no se muestra aquí.
Tenga en cuenta que el componente El nombre debe ser declarado. Este nombre es la etiqueta del componente. Se
textarea/index.jsutiliza para exportar un solo componente. Si desea importar bajo demanda, también debe configurarlo aquí

// packages/textarea/index.js

// 导入组件，组件必须声明 name
import Textarea from './main.vue'

// 为组件添加 install 方法，用于按需引入
Textarea.install = function (Vue) {
    Vue.component(Textarea.name, Textarea)
}

export default Textarea

4. Integrar y exportar componentes
Edite el archivo packages / index.js para lograr el registro global de componentes

// packages / index.js

// 导入单个组件
import Textarea from './textarea/index'

// 以数组的结构保存组件，便于遍历
const components = [
    Textarea
]

// 定义 install 方法
const install = function (Vue) {
    if (install.installed) return
    install.installed = true
    // 遍历并注册全局组件
    components.map(component => {
        Vue.component(component.name, component)
    })
}

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

export default {
    // 导出的对象必须具备一个 install 方法
    install,
    // 组件列表
    ...components
}

En este punto, el componente se ha desarrollado

Este componente se puede introducir en examples / main.js

import TagTextarea from '../packages/index'
Vue.use(TagTextarea)

La etiqueta del componente es el nombre definido en el componente. En

este momento, puede iniciar el proyecto con npm run serve para probar si el componente tiene errores
// Antes de comenzar, debe asegurarse de haber agregado una nueva entrada examples / main.js en vue.config.js

Cinco, el componente de empaquetado
vue-cli 3.x proporciona un comando de empaquetado de archivos de biblioteca que
requiere cuatro parámetros principales:
1.  destino : el valor predeterminado es compilar la aplicación, cambiar a  lib  para habilitar el modo de biblioteca de compilación
2.  nombre : nombre del archivo de salida
3.  dest : directorio de salida, el predeterminado es dist, aquí lo cambiamos a  lib
4.  entrada : ruta del archivo de entrada, el predeterminado es src / App.vue, aquí se cambia a  packages / index.js En
base a esto, agregue uno a los scripts en package.json  comando  lib

// pageage.json

{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"
  }
}

Luego ejecute el comando npm run lib para compilar los componentes

6. Para prepararse para el lanzamiento,
primero debe agregar la información del componente en package.json
nombre: nombre del paquete, que no puede entrar en conflicto con el nombre existente;
versión: número de versión, que no puede ser el mismo que el número de versión histórica;
descripción: introducción;
principal: archivo de entrada, debe Señale el archivo del paquete compilado;
palabra clave: palabras clave, separadas por espacios;
autor: autor;
privado: si es privado, debe modificarse a falso antes de publicarlo en npm;
licencia: acuerdo de código abierto.

Luego, cree un archivo .npmignore y configure el archivo ignorar.
La sintaxis de este archivo es la misma que la de .gitignore. Establezca qué directorios o archivos ignorar al publicar en npm

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

7. Publicar en npm
Si ha cambiado la dirección de espejo de npm antes, como usar el espejo de Taobao, cámbiela primero

npm config set registry http://registry.npmjs.org

Si no tiene una cuenta npm, puede  crear una cuenta a través del comando  npm adduser o registrarse en el sitio web oficial de npm .
Si tiene una cuenta  registrada en el sitio web oficial, o tiene una cuenta antes, use el  comando  npm login para iniciar sesión. El
proceso específico puede referirse al documento oficial (Google Chrome -> traducir chino)

Antes de publicar, asegúrese de que el componente se haya compilado y que la ruta del archivo de entrada (principal) en package.json sea correcta y que
todo esté en su lugar. Publique el componente:

npm publish

original: https://www.cnblogs.com/wisewrong/p/10186611.html