Cómo desarrollar múltiples páginas en vue2.0
Cuando usualmente usamos vue para el desarrollo, siempre sentimos que vue parece haber nacido específicamente para aplicaciones de una sola página, pero este no es el caso. Porque Vue depende en gran medida del paquete web en el desarrollo de ingeniería, y el paquete web integra todos los recursos en una sola página. Pero vue no solo puede hacer una sola página, también puede hacer varias páginas. Si desea tener varias páginas, debe confiar en él, es decir, reconfigurar el paquete web. Este artículo presentará la configuración del paquete web en detalle.
Hay dos formas de desarrollar vue. Una es introducir directamente el archivo vue.js en la etiqueta del script. De esta manera, personalmente creo que será más cómodo realizar pequeños proyectos de varias páginas. Una vez que realice un proyecto grande, es mejor Inseparable del paquete web. Entonces, otra forma es desarrollar un proyecto basado en webpack y vue-cli. Aquí están los pasos detallados.
En primer lugar, si utiliza el desarrollo de proyectos vue, primero necesita node.js y luego el siguiente npm, pero generalmente las nuevas versiones de node tendrán npm, por lo que no podrá obtenerlo. Ingrese instrucciones en la línea de comando. En primer lugar, el primer paso es generar un proyecto vue. El comando es:
vue init webpack test
El propio blogger declaró el nombre del archivo para probar, lo descargó e ingresó todo. Por cierto, luego generé. Tengo un proyecto vue, pero este proyecto vue no tiene algunas dependencias relacionadas. ¡En este momento, debes ir a la carpeta para encontrarlo! Después de esperar unos minutos, se completará toda la dependencia. En este momento, ingrese el comando
npm run dev
y se abrirá automáticamente una interfaz si ocurre un error. No puedo abrir la página web, solo hay una razón: la ocupación del puerto. Solo necesita cambiar el puerto en el directorio /config/index.js.
Cuando un proyecto vue completa todas las configuraciones, el siguiente paso es nuestro enfoque. Primero, creamos varios archivos html nuevos. Como blogger, creé one.html y two.html, así como sus correspondientes. vue y js, el directorio de archivos es el siguiente:
Después de eso, ingresamos al directorio buildwebpack.base.conf.js, buscamos la entrada en el campo module.exports y agregamos varias entradas allí. :
p>entrada: {
aplicación: './src/main.js',
una: './src/js/one. js',
two: './src/js/two.js'
},
Preste atención a los nombres de las variables en fuente violeta en caso lo olvides, porque luego los verás usados.
El siguiente paso es cambiar el entorno de desarrollo para ejecutar dev, abrir el archivo buildwebpack.dev.conf.js y buscar el complemento en module.exports, que está escrito de la siguiente manera:
complementos: [
nuevo webpack.NoEmitOnErrorsPlugin(),
// /ampedandwired/html-webpack-plugin
nuevo HtmlWebpackPlugin({
nombre de archivo: 'index.html',
plantilla: 'index.html',
inyectar: verdadero,
fragmentos: ['aplicación']
}) ,
nuevo HtmlWebpackPlugin({
nombre de archivo: 'one.html',
plantilla: 'one.html',
inyectar: verdadero,
fragmentos: ['one']
}),
nuevo HtmlWebpackPlugin ({
nombre de archivo: 'two.html',
plantilla: 'two.html',
inyectar: verdadero,
trozos: ['dos']
}),
new FriendlyErrorsPlugin()
]
La aplicación en trozos se refiere a la Igual que en webpack.base.conf.js El nombre de la variable correspondiente a la entrada. El propósito de usar un fragmento es que corresponda a una entrada cada vez que compila, cada vez que ejecuta una entrada. Si no está escrito, se introducirán todos los recursos de la página.
Después de eso, configuramos el entorno de compilación en ejecución.
Primero, abra el archivo configindex.js y agregue lo siguiente a la compilación:
index: path.resolve(dirname, './dist/index.html'),
one : path.resolve(dirname, '. /dist/one.html'),
dos: path.resolve(dirname, '. /dist/two.html'),
Luego abra el archivo /build/webpack.prod/conf.js, busque HTMLWebpackPlugin en el complemento y agregue el siguiente código:
new HtmlWebpackPlugin({
nombre de archivo: proceso. env.NODE_ENV === 'prueba'
?'index.html'
: config.build.index,
plantilla: 'index.html' ,
inyectar: verdadero,
minificar: {
eliminarComentarios: verdadero,<
colapsarEspacio en blanco: verdadero,
removeAttributeQuotes: true
// más opciones:
// /kangax/html-minifier#options-quick-reference
},
// necesario para trabajar consistentemente con múltiples fragmentos a través de CommonsChunkPlugin
chunksSortMode: dependencias',
fragmentos: ['manifest', 'vendor', 'app']< / p>
}),
nuevo HtmlWebpackPlugin({
nombre de archivo: config.build.one,
plantilla: ' one.html',
inyectar: verdadero,
minificar: {
eliminarComentarios: verdadero,
colapsarespacio en blanco: verdadero,
removeAttributeQuotes: true
},
fragmentosSortMode: 'dependencia',
fragmentos: ['manifest', 'vendor', 'one']
}),
nuevo HtmlWebpackPlugin({
nombre de archivo: config.build.two,
plantilla: 'two.html ' ,
inyectar: verdadero,
minificar: {
eliminarComentarios: verdadero,
colapsarespacio en blanco: verdadero,
removeAttributeQuotes: true
},
fragmentosSortMode: 'dependencia',
fragmentos: ['manifiesto', 'proveedor', 'dos']< / pag
>
}),
donde el nombre del archivo hace referencia a la compilación en configindex.js. js, cada página debe configurarse con fragmentos; de lo contrario, se cargarán todos los recursos de la página.
El archivo one.js podría verse así:
importar Vue desde 'vue'
importar uno desde '. /one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#one',
render: h => h (one)
})
one.vue se escribe de la siguiente manera :