Utilisez vue-router pour créer la barre de navigation inférieure dans vue-cli (tutoriel détaillé)

Cet article présente principalement le projet frontal mobile de la barre de navigation inférieure basé sur vue-cli vue-router. Le projet utilise principalement les connaissances liées à la mise en page Flex et aux fenêtres d'affichage, et a atteint l'objectif de s'adapter à chaque écran de terminal. Les amis qui en ont besoin peuvent se référer à

La première étape de l'apprentissage de vue.js pour éviter les pièges

1. Installez d'abord l'échafaudage vue-cli

Pas plus de détails, se réfèrent principalement à la route Vue pour gravir la fosse (1) - utilisez vue-cli pour construire le projet

2. Effet de présentation du projet

Site Web de présentation du projet : www.zhoupeng520.cn/index.html

Le projet utilise principalement la mise en page Flex et les connaissances liées aux fenêtres d'affichage, qui ont atteint l'objectif de s'adapter à chaque écran de terminal

3. Le répertoire principal du projet

4 Le code principal est le suivant

(1) App.vue

<template>
 <p id="app">
 <router-view class="view"></router-view>
 <p class="nav">
  <router-link class="nav-item" to="/langren">狼人杀</router-link>
  <router-link class="nav-item" to="/sanguo">三国杀</router-link>
  <router-link class="nav-item" to="/yingxiong">英雄杀</router-link>
 </p>
 </p>
</template>
<script>
</script>
<style>
 #app{
 height: 100%;
 display: flex;
 flex-direction: column;
 flex: 1;
 }
 .nav{
 height: 80px;
 line-height: 80px;
 display: flex;
 text-align: center;
 }
 .nav-item{
 flex: 1;
 text-decoration: none;
 }
 .nav-item:link,.nav-item:visited{
 background-color: white;
 color: black;
 }
 .nav-item:hover,.nav-item:active{
 color: white;
 background-color: #C8C6C6;
 }
</style>

(2)main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router';
import App from './App';
Vue.config.productionTip = false;
Vue.use(VueRouter);
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: &#39;</App>&#39;,
 render: h => h(App)
});

(3)index.js //Voici la configuration du routage

Cela peut être écrit directement dans main.js ou comme moi. Ils sont également introduits dans main.js, chacun a ses propres avantages

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
 routes: [{
  path: '/langren',
  component: require('../components/vue/langren.vue')
 }, {
  path: '/sanguo',
  component: require('../components/vue/sanguo.vue')
 }, {
  path: '/yingxiong',
  component: require('../components/vue/yingxiong.vue')
 }, {
  path: '/',
  component: require('../components/content/content.vue')
 }]
});
export default router;

Vous pouvez également écrire directement un routers.js et le placer dans le src directory

(4)router.js

import langren from './components/vue/langren.vue';
import sanguo from './components/vue/sanguo.vue';
import yingxiong from './components/vue/yingxiong.vue';
const routers = [
 {
  path: '/langren',
  component: langren
 },
 {
  path: '/sanguo',
  component: sanguo
 },
 {
  path: '/yingxiong',
  component: yingxiong
 }
];
export default routers;

(5)content.vue

<template>
 <p class="content"><p>我是content！</p></p>
</template>
<script type="text/ecmascript-6">
 export default {};
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .content
  height:100%
  background:blue
  flex:1
  display:flex;
  justify-content:center
  align-items:center
</style>

Le code est le même que celui-ci, seules la couleur et les champs en p ont été modifiés. langren.vue / sanguo.vue / yingxiong.vue

C'est tout pour le code principal.

5. Notez également les principales erreurs rencontrées et leurs solutions

(1) Puisqu'il est utilisé pour la grammaire es6, vous devez suivre certaines de ses règles grammaticales. , donc certains codes nécessitent une ligne vierge supplémentaire à la fin, certains doivent ajouter des points-virgules et certains doivent ajouter des espaces. Apportez des modifications en fonction du rapport d'erreur

(2) semi//indent//no-. rapport d'erreur des onglets, modifiez le code dans .eslintrc.js comme suit, en ajoutant principalement les dernières lignes.

// http://eslint.org/docs/user-guide/configuring
module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
 sourceType: 'module'
 },
 env: {
 browser: true,
 },
 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 extends: 'standard',
 // required to lint *.vue files
 plugins: [
 'html'
 ],
 // add your custom rules here
 'rules': {
 // allow paren-less arrow functions
 'arrow-parens': 0,
 // allow async-await
 'generator-star-spacing': 0,
 // allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
 'semi': ['error', 'always'],
 'indent': 0,
 'space-before-function-paren': 0,
 "no-tabs":"off"
 }
}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Exemple détaillé d'interaction entre Servlet3.0 et javascript pur via Ajax

Comment remplacer les éléments de nœud par jQuery

Tutoriel détaillé sur l'utilisation d'Angular CLI pour générer des projets Angular 5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!