[Webpack] Use Vue en webpack

Intenta usar Vue en el paquete web

Nota: El constructor de Vue importado usando import Vue desde 'vue' en el paquete web tiene funciones incompletas. Solo proporciona una forma de tiempo de ejecución y no proporciona una forma como en la página web.

1. Por defecto, webpack no puede empacar archivos .vue, debe instalar el cargador relevantenpm i vue-loader vue-template-compiler -D
2. Se agregó un elemento de configuración del cargador en el archivo de configuración webpack.config.js{ test:/\.vue$/,use:'vue-loader' }
3. En webpack, si desea poner un componente en la página a través de vue para mostrar, se puede implementar la función de representación en la instancia de vm

Resumir

1. Instale el paquete vue:npm i vue -S
2. En webpack, se recomienda utilizar el archivo de plantilla del componente .vue para definir el componente, por lo que debe instalar un cargador que pueda analizar este archivo npm i vue-loader vue-template-complier -D
3. En main.js, importe el módulo vue import Vue form 'vue'(el que se obtiene es un constructor, la primera letra se capitaliza mejor)
4. Defina un componente que termine en .vue, donde el componente consta de tres partes:

<template>
</template>

<script>
</script>

<style>
</style>

5. Use import para importar este componenteimport login from './login.vue'
6. Crear una instancia de vm let vm = new Vue({el:"#app",render:c=>c(login)})
7. Cree un elemento div con la aplicación id en la página como el área que controlará nuestra instancia vm

Reglas de búsqueda de paquetes

1. Encuentre si hay una carpeta node_modules en el directorio raíz del proyecto
2. Encuentre la carpeta vue correspondiente de acuerdo con el nombre del paquete en node_modules
3. Busque un archivo de configuración de paquete llamado package.json en la carpeta vue
4. Encuentre un atributo principal en el archivo package.json (el atributo principal especifica el archivo de entrada para este paquete cuando se carga)