Soy muy nuevo en vue. Sé que este es fácil con vue-cli, pero primero necesito aprender esto sin usar el nodo. Estaba haciendo muchos archivos de plantilla y páginas en diferentes archivos js. De repente, me vino a la mente que, ¿qué sucede si se solicita y descarga una gran cantidad de archivos? Lo que estoy tratando de hacer es fusionar la ruta y la carga del componente asíncrono para cargar diferentes páginas cuando se las llama. ¿Hay alguna forma de hacer esto? Este es el código que probé para mi proyecto inicial.
<html> <head> <script src="vue.js"></script> <script src="vue-route.js"></script> <script src="axios.min.js"></script> </head> <body> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </p> <router-view></router-view> </div> <script> //axios.get("https://shohanlab.com") const Home = { template: '<div>Home</div>' } const AsyncComp = () => new Promise((resolve, reject) => { resolve({ template: About }) }) const routes = [ { path: '/', component: Home }, { path: '/about', component: AsyncComp }, ] const router = VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes, // short for `routes: routes` }) const app =Vue.createApp({}) app.use(router) app.mount('#app') </script> </body> </html>Como podemos ver en el código, The About.js se llama incluso antes de que yo lo llame. De esta forma el tamaño de la página será muy grande.
Puede cargar vistas de forma perezosa de la siguiente manera:
const routes = [ { path: '/', name: 'Dashboard', component: () => import('../views/Dashboard.vue') } ]Consulte los documentos oficiales para obtener más información.
Vue está diseñado principalmente para usarse con Vue CLI u otra configuración de nodo con un paso de compilación. La documentación y prácticamente todos los ejemplos cubren este escenario y asumen que se utilizan .vue SFC. Todavía es posible usar Vue 3 con JavaScript estándar, pero de esta manera carece de la documentación, las funciones y muchas bibliotecas de Vue de terceros que no se pueden usar sin compilarlas.
Es posible lograr esto con carga diferida (como se señaló en otra respuesta). Los módulos ES nativos se pueden usar con el mismo propósito para evitar un paso de compilación. El punto de entrada también debe ser un módulo.
Una demostración :
índice.html
<div id="app"> <h1>Hello App!</h1> <p> <router-link to="/">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </p> <router-view></router-view> </div> <script type="module" src="script.js"></script>acerca de.js
export default { template: '<div>About</div>' }guión.js
const routes = [ { path: '/', component: { template: '<div>Home</div>' } }, { path: '/about', component: () => import('./about.js') }, ] const router = VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes, }) const app =Vue.createApp({}) app.use(router) app.mount('#app')