Construction de projet d'échafaudage Vue CLI 4.5.7, analyse de la structure de répertoires, utilisation de base de Vue Router

Vue CLI s'engage à
standardiser la base de l'outil dans l'écosystème Vue . Il garantit que divers outils de construction peuvent être connectés en douceur en fonction de configurations par défaut intelligentes, de sorte que vous puissiez vous concentrer sur l'écriture d'applications au lieu d'avoir à passer des jours à lutter avec des problèmes de configuration. En même temps, il offre également la flexibilité d'ajuster la configuration de chaque outil sans
éjection.

Adresse du document officiel: https://cli.vuejs.org/zh/guide/

1. Créez un projet d'échafaudage Vue CLI 4.5.7

1. Créez un nouveau projet d'échafaudage Vue CLI via Webstorm npx

2. La structure de répertoire par défaut est illustrée dans la figure

3. Ouvrez la ligne de commande et utilisez pour npm ls --depth 0afficher les dépendances par défaut du projet

4. Utilisez le npm run serveprojet en cours d'exécution, le port par défaut est 8080

Deux, l'utilisation de base de Vue Router

Vue Router est le gestionnaire de routes officiel de Vue.js. Il est profondément intégré au cœur de Vue.js, ce qui facilite la création d'applications d'une seule page. Les fonctions incluses sont:

• Table de routage / vue imbriquée
• Configuration de routage modulaire basée sur les composants
• Paramètres de routage, requêtes, caractères génériques
• Afficher l'effet de transition basé sur le système de transition Vue.js
• Contrôle de navigation à grain fin
• Lien avec la classe CSS automatiquement activée
• Mode historique HTML5 ou mode hachage, rétrograder automatiquement dans IE9
• Comportement de la barre de défilement personnalisée

Adresse du document officiel: https://router.vuejs.org/zh/

1. Installation Vue Router

npm install vue-router

2. Créez un nouveau fichier js

3. Ecrire le routage

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. Montez la route sur l'instance racine

Éditermain.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. Modifiez le composant racine App.Vue

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

<style>
</style>

<router-view>Il s'agit de la sortie de niveau supérieur, qui rend les composants correspondant au routage de niveau supérieur. De même, un composant rendu peut également contenir sa propre imbrication <router-view>.

Pour rendre les composants dans les sorties imbriquées, vous devez utiliser la configuration enfants dans les paramètres de VueRouter. La configuration enfants est un tableau de configuration de routage comme la configuration de routes, vous pouvez donc imbriquer plusieurs couches de routage.

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

Comme, préféré, suivez, votre soutien est ma plus grande motivation!