Vue: Modular

modular

webpack> componente de una sola fila vue> Andamios vue

1, ES6 sintaxis básica modular:

　　1-1, exportación predeterminado: exportar todo defecto de exportación {}

dejar que a = 10 
let b = 20 
Sea C = 30 función show () { 
    console.log ( '123 456' ) 
} 
exportación predeterminado { 
    a, c, espectáculo 
}

　　de importación predeterminado: m1 importación de' ./m1'

m1 importación de' ./m1' 
console.log (m1)

　　porción de introducción de acuerdo con las necesidades de: demanda 1-2, exportación

// demanda de exportación 
de exportación de la let = 'AAA' 
de exportación del Sea B = 'BBB'

// demanda introdujo, por un como un alias 
de importación {a, b} de ' ./m1'

　　1-3, código modular y ejecutado directamente introdujo: Una vez importado, se ejecuta el código dentro de

importación '' m1.js

2, webpack : documentos oficiales https://www.webpackjs.com/concepts/

　　Nuevo archivo de gestión de paquetes de configuración, el terminal de entrada de comandos

asl s init

　　jQuery instalación

NPM i jQuery -S

　　-1 paquetes relacionados instalados webpack

NPM instalar webpack webpack -D-cli

　　-2 archivo webpack.config.js se crea en el directorio principal del proyecto, el contenido de complemento

= Module.exports {
     // modo de compilación 
    MODO: El 'desarrollo' // Desarrollo modo de producción modo de compilación de la producción 
}

　　-3 añadir webpack.json contenido de guiones

  "guiones" : {
     "prueba": "echo \" Error: ninguna prueba especifica \" && salida 1" ,
     "DEC": "webpack" 
  },

　　-4, el proyecto se compila utilizando dev plazo NPM

　　2-2, los documentos de entrada y salida

　　2-3, la función de envasado automático

　　　　-1 herramienta NPM instalación de envasado automático instalar webpack-dev-servidor -D

　　　　-2 webpack.json modificar el "dev": "webpack-dev-servidor"

  "guiones" : {
     "prueba": "echo \" Error: ninguna prueba especifica \" && salida 1" ,
     "dev": "webpack-dev-servidor" 
  },

　　　　-3 modificar el ritmo de las referencias dentro de HTML <script src = "../ dist / bundle.js"> </ script>, después del reenvasado, visite http: // localhost: 8080

　　2-4, genera la página de vista previa al entrar en http: // localhost: 8080, en lugar de mostrar la carpeta, pero directamente en la página principal de HTML

　　2-5, loader loader

webpack sólo puede manejar archivo JavaScript, cargador deja webpack capaz de hacer frente a esos archivos que no son de JavaScript. Esencialmente, webpack loader todos los tipos de archivos, se convierte en el diagrama de dependencia de módulos de la aplicación (y, finalmente, el paquete) se puede hacer referencia directamente.

　　2-5-1, y el montaje de estilo CSS-loader-loader

NPM i-loader estilo CSS-loader -D

　　configuración 2-5-2

    módulo: { 
        reglas: [ 
            {prueba: /\.css$/, uso: [ 'estilo-loader', 'css-loader' ]} 
        ] 
    }

　　prueba indica el tipo de juego de archivos, el uso representa cargador a la llamada.

　　Procesado con el fin de llamar al archivo del cargador se fija, llamando desde la parte de atrás

　　El procesamiento de menos de archivos:

　　　　instalar

NPM i menos-loader menos -D

　　　　Agregar regla

{Prueba: /\.less$/, utilice: [ 'estilo-loader', 'css-loader', 'menos-loader']}

　　Sass procesamiento de archivos:

NPM i SAT-loader nodo-Sass -D

　　2-6, envasados CSS hojas de estilo imágenes y archivo de fuente del cargador

　　Descargar cargador

NPM i url-loader archivo -D-loader

　　Normas de configuración

{Prueba: /\.(jpg|png|gif|bmp|jpeg|bmp|ttf|svg)$/,use: '? Url-loader límite = 50480'}

　　2-6, el procesamiento de loader empaquetado js gramática avanzada

3, el conjunto de un solo archivo vue

<template> 
  
</ template> 

<script> 
de exportación por defecto { 
    datos: { 

    }, 
    métodos: { 
        
    } 
}
 </ script> 

<style> 

</ style>

App.vue

　　Cargador de descargas -1 loader

i-loader NPER vista vista-template-compilar -D

　　-2 añadido reglas de configuración del cargador

        reglas: [ 
            {prueba: /\.vue$/,loader:'vue-loader ' } 
        ]

　　-3, añadir plug-ins

const VueLoaderPlugin = require ( 'vue-loader / lib / plugin')

    plugins: [
         nuevo VueLoaderPlugin () 
    ],

　　 código de uso

　　Embalado y puesto en libertad

4, andamios vue-CLI

　　pasos de instalación oficiales documentación: https://cli.vuejs.org/zh/guide/installation.html

Supongo que te gusta