Construcción de proyectos de andamios Vue CLI 4.5.7, análisis de estructura de directorios, uso básico de Vue Router

Vue CLI se compromete a
estandarizar la base de la herramienta en el ecosistema Vue . Garantiza que varias herramientas de construcción se puedan conectar sin problemas en función de configuraciones predeterminadas inteligentes, para que pueda concentrarse en escribir aplicaciones en lugar de tener que pasar días luchando con problemas de configuración. Al mismo tiempo, también proporciona la flexibilidad de ajustar la configuración de cada herramienta sin
expulsarla.

Dirección del documento oficial: https://cli.vuejs.org/zh/guide/

Uno, cree un proyecto de andamio Vue CLI 4.5.7

1. Cree un nuevo proyecto de andamio CLI de Vue a través de Webstorm npx

2. La estructura de directorio predeterminada se muestra en la figura.

3. Abra la línea de comando y utilícela para npm ls --depth 0ver las dependencias predeterminadas del proyecto.

4. Utilice el npm run serveproyecto en ejecución, el puerto predeterminado es 8080

Dos, el uso básico de Vue Router

Vue Router es el administrador de rutas oficial de Vue.js. Está profundamente integrado con el núcleo de Vue.js, lo que facilita la creación de aplicaciones de una sola página. Las funciones incluidas son:

• Tabla de enrutamiento / vista anidada
• Configuración de enrutamiento modular basada en componentes
• Parámetros de enrutamiento, consultas, comodines
• Ver efecto de transición basado en el sistema de transición Vue.js
• Control de navegación detallado
• Enlace con clase CSS activada automáticamente
• Modo de historial HTML5 o modo hash, degradado automáticamente en IE9
• Comportamiento personalizado de la barra de desplazamiento

Dirección del documento oficial: https://router.vuejs.org/zh/

1. Instalación Vue Router

npm install vue-router

2. Cree un nuevo archivo js

3. Escribir enrutamiento

import VueRouter from 'vue-router'
import Vue from 'vue'
import Login from "@/components/Login";
// 使用VueRouter
Vue.use(VueRouter);
// 定义路由
const routes = [
    {
    
    
        path: '/',
        component: Login
    }
];
// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
    
    
    routes
});
// 暴露接口
export default router;

4. Monte la ruta a la instancia raíz.

editarmain.js

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
// 关闭生产模式下的提示
Vue.config.productionTip = false;

new Vue({
    
    
    // 挂载里路由到根实例
    router,
    render: h => h(App),
}).$mount('#app');

5. Edite el componente raíz App.Vue

<template>
    <div id="app">
        <!-- 路由匹配到的组件将显示在这里 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
    
    
        name: 'App',
    }
</script>

<style>
</style>

<router-view>Es la salida de nivel superior, lo que hace que los componentes coincidan con el enrutamiento de nivel superior. De manera similar, un componente renderizado también puede contener su propio anidamiento <router-view>.

Para representar componentes en salidas anidadas, debe usar la configuración secundaria en los parámetros de VueRouter. La configuración secundaria es una matriz de configuración de enrutamiento como la configuración de rutas, por lo que puede anidar múltiples capas de enrutamiento.

import VueRouter from 'vue-router'
import Vue from 'vue'
import Login from "../components/Login";
import Home from "../components/Home";
import UserList from "../components/user/UserList";
import SensitiveWord from "../components/sensitive-word/SensitiveWord";
import Report from "../components/report/Report";
import FileInfo from "../components/file-info/FileInfo";
import Register from "../components/Register";

Vue.use(VueRouter);

const routes = [
    {
    
    
        path: '/',
        redirect: '/login'
    },
    {
    
    
        path: '/login',
        component: Login
    },
    {
    
    
        path: '/register',
        component: Register
    },
    {
    
    
        path: '/home',
        component: Home,
        children: [
            {
    
    
                path: '/userList',
                component: UserList
            },
            {
    
    
                path: '/sensitiveWord',
                component: SensitiveWord
            },
            {
    
    
                path: '/report',
                component: Report
            },
            {
    
    
                path: '/fileInfo',
                component: FileInfo
            }
        ]
    }
];

const router = new VueRouter({
    
    
    routes
});

export default router

Me gusta, favorito, sigue, ¡tu apoyo es mi mayor motivación!