Tengo problemas para descubrir cómo tener varias páginas en un proyecto de CLI de Vue. En este momento tengo mi página de inicio con algunos componentes y quiero crear otra página pero no sé cómo hacerlo. ¿Se supone que debo crear varios archivos html donde está index.html por defecto? En una estructura de archivos simple con la carpeta css js img y los archivos html como páginas, sé que crear otro archivo html significa crear otra página. Pero no entiendo cómo funciona esto con el proyecto Vue CLI.
Vi cosas como vue-router y "páginas" en la documentación de Vue pero no las entiendo muy bien. ¿Cuáles son mis alternativas? ¿Hay alguna guía que explique eso en detalle, porque no pude encontrar ninguna, y mucho menos detallada? ¡Sería muy feliz si pudieras ayudar! ¡Gracias!
Nota que indica a los usuarios cuál debería ser la respuesta aceptada
En el momento de publicar mi respuesta inicial, no estaba al tanto de la posibilidad de construir MPA en VueJS. Mi respuesta no aborda la pregunta formulada, por lo tanto, recomendaré que eche un vistazo a la respuesta proporcionada por PJ.Wanderson a continuación, que debería ser la respuesta aceptada.
Respuesta inicial
Los proyectos de Vue.js son SPA (aplicaciones de una sola página). Solo tiene un archivo .html
en todo el proyecto, que es el archivo index.html
que mencionó. Las "páginas" que desea crear, en vue.js se denominan componentes. Se conectarán al archivo index.html
y se representarán en el navegador. Un componente vue.js consta de 3 partes:
<template> </template> <script> export default { } </script> <style> </style>
Puede consultar este tutorial para obtener un inicio rápido Vue.js 2 Quickstart Tutorial 2017
Explica la estructura del proyecto vue.js y cómo los distintos archivos se relacionan entre sí.
Primero: lee siempre la documentación oficial. Con Vue puede construir un SPA y un MPA tampoco es un problema. Solo sigue las guías:
Debe crear un nuevo proyecto con Vue CLI 3. Una vez que haya creado su proyecto, configúrelo para que se configure manualmente. Asegúrate de no elegir la opción SPA. Vue luego creará un buen proyecto de "inicio" utilizando un enfoque MPA. Después de eso, simplemente repita la configuración en vue.config.js.
Actualizado # 1
Parece que algunas actualizaciones en Vue Cli han cambiado la forma de crear una aplicación MPA, así que:
vue create test
El modelo creado será para un SPA. Así que haz los siguientes cambios:
Cree una carpeta en pages
con nombre src
(opcional)
En esta carpeta cree sus propias páginas: Inicio, Acerca de, etc.
Copie y pegue App.vue y main.js desde src, en sus nuevas carpetas: Inicio, etc.
Formatee App.vue
en estas carpetas, a su gusto.
Cree un vue.config.js y configúrelo así: https://cli.vuejs.org/config/#pages
A continuación, tengo tres imágenes que demuestran esto:
No necesita crear la carpeta de pages
, esto es solo para tener una idea.
Enlace a GitHub: creación de una aplicación MPA
EDITAR : Vue tiene esto incorporado. Salta al final para más.
Respuesta original:
Hay dos formas de interpretar su pregunta y, por lo tanto, de responderla.
La primera interpretación es: "¿cómo puedo admitir el enrutamiento a diferentes páginas dentro de la misma aplicación de una sola página, por ejemplo, localhost: 8080/about y localhost: 8080/report, etc.?". La respuesta a esto es usar el enrutador. Es razonablemente sencillo y funciona bien.
La segunda interpretación es: "mi aplicación es compleja y tengo varias aplicaciones de una sola página , por ejemplo, una aplicación para la parte del 'sitio web', una aplicación para que los consumidores inicien sesión y trabajen, una aplicación para administradores, etc. vue hacer esto, sin hacer tres repositorios completamente separados?"
La respuesta a esto último es un repositorio único con múltiples aplicaciones de una sola página. Esta demostración se parece exactamente a lo que buscas:
https://github.com/Plortinus/vue-multiple-pages/
Mire en particular: https://github.com/Plortinus/vue-multiple-pages/blob/master/vue.config.js
Respuesta actualizada:
Resulta que vuejs tiene la idea de múltiples páginas de nivel superior integradas. Quiero decir, tiene sentido: va a ser muy común, a pesar de lo que dicen muchas respuestas incorrectas sobre "no, es para aplicaciones de una sola página".
Desea la opción de pages
en el archivo vue.config.js
:
https://cli.vuejs.org/config/#pages
Si su proyecto no tiene ese archivo en el directorio raíz, créelo y vuejs lo descubrirá.
Hay una forma larga y otra corta de definir cada página. Usé la forma corta aquí:
module.exports = { pages: { index: 'src/pages/index/main.ts', experiment: 'src/pages/experiment/main.ts' } }
No tienes que poner tu trabajo en "páginas". Podría ser "/src/apps/index/index.ts" o lo que sea.
Después de mover el código y cambiar algunas importaciones de:
import HelloWorld from './components/HelloWorld'
para
import HelloWorld from '@/components/HelloWorld'
La aplicación funciona, pero la aplicación "experimento" en mi repositorio tuvo que cargarse así:
http://localhost:8080/experiment.html
Bastante feo, y peor aún porque usa el enrutador que resultó en URL como:
http://localhost:8080/experiment.html/about
Puaj.
Afortunadamente, esta respuesta de stackoverflow lo resolvió. Actualice el archivo vue.config.js
para incluir las opciones de devServer
(asegúrese de que esté en el nivel superior del objeto exportado:
devServer: { historyApiFallback: { rewrites: [ { from: /\/index/, to: '/index.html' }, { from: /\/experiment/, to: '/experiment.html' } ] } }
Luego también modifique el archivo router.ts
para agregar la ruta adicional (en mi caso, "experimento/":
export default new Router({ mode: 'history', base: process.env.BASE_URL + 'experiment/', ...
Luego, las URL se resuelven bien, por ejemplo: http://localhost:8080/experiment/about
Esto puede no ser relevante para la pregunta, pero tenga paciencia conmigo, tal vez mi respuesta pueda ayudar a alguien. Uso webpack+vue, y he descubierto cómo crear aplicaciones de varias páginas . Aquí mi webpack.config.js:
const path = require('path'); const fs = require('fs') const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); module.exports = { entry: { app: './src/app.js', mgmt: ['./src/modules/mgmt/mgmt.js'], login: './src/modules/login/login.js' }, output: { path: path.resolve(__dirname, 'dist'), // publicPath: '/ahezime/', filename: (chunkData) => { console.log('chuckData.chunk.name => ', chunkData.chunk.name) return chunkData.chunk.name === 'app' ? './[name].bundle.js' : './[name]/[name].bundle.js'; } }, optimization: { minimizer: [ new TerserPlugin(), new OptimizeCSSAssetsPlugin({}) ] }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }), new CleanWebpackPlugin(['dist']), new VueLoaderPlugin(), new HtmlWebpackPlugin({ title: 'app', template: './src/app.html', // inject: false, chunks: ['app'], filename: './index.html' }), new HtmlWebpackPlugin({ title: 'mgmt', template: './src/modules/mgmt/mgmt.html', // inject: false, chunks: ['mgmt'], filename: './mgmt/index.html' }), new HtmlWebpackPlugin({ title: 'login', template: './src/modules/login/login.html', // inject: false, chunks: ['login'], filename: './login/index.html' }) ], module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-object-rest-spread'] } } } ], rules: [ { test: /\.vue$/, exclude: /node_modules/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'vue-style-loader', 'style-loader', 'css-loader', 'sass-loader' ] }, { test: /\.scss?$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] } ] } };
Y aquí está mi estructura de directorios:
Y puedes saltar páginas:
<template> <div> <h1>App</h1> <div> <a href="./login">Please click me, and let take you into the login page!!!</a> </div> <span>Before computed: {{ message }} </span> <br> <span>Afer computed: {{ computedMessage() }} </span> </div> </template> <script> export default { data() { return { message: 'Hello World!' } }, computed: { reversedMessage: function() { return this.message.split('').reverse().join('') } }, methods: { computedMessage: function() { return this.message.split('').reverse().join('') } } } </script>