Proyecto VUE2: Proyecto de inicialización de andamios Shangpinhui VUE-CLI y análisis de componentes de enrutamiento (1)

ambiente

El requisito previo es tener node.jsun webpackentorno y es necesario instalar VUE-CLI. Mi versión es@vue/cli 5.0.8

Vue CLI es una herramienta de desarrollo rápido basada en Vue.js que puede ayudar a los desarrolladores a crear rápidamente proyectos Vue.js. Existen los siguientes pasos para ejecutar un proyecto Vue CLI:

1. Instale Vue CLI: use npm o Yarn para instalar Vue CLI. Puede usar el siguiente comando:

npm install -g @vue/cli

2. Cree un proyecto de Vue: use la CLI de Vue para crear un nuevo proyecto de Vue. Puede usar el siguiente comando:

vue create app

Entre ellos, aplicación es el nombre del proyecto.

3. Ejecute el proyecto Vue: ingrese al directorio del proyecto y use el siguiente comando para ejecutar el proyecto Vue:

cd app
npm run serve

4. Acceda a la aplicación Vue: acceda a la dirección del proyecto Vue en ejecución en el navegador, que se puede ver en la terminal. De forma predeterminada, la dirección de la aplicación es: http://localhost:8080/.

Si necesita empaquetar el proyecto, puede utilizar el siguiente comando:

npm run build

Esto generará un directorio dist que contiene la aplicación empaquetada. Para conocer los pasos de instalación específicos, consulte vue-cli

Directorio cargado:

directorio VUE2

público

Coloque archivos de recursos estáticos. Los recursos de archivos estáticos en esta carpeta se empaquetarán intactos en la carpeta dist cuando webpack los empaquete.

activos

Coloque recursos estáticos comunes a cada componente. Al empaquetarlo, trátelo como un módulo y empaquetelo en un archivo JS.

componentes

Coloque componentes que no sean de enrutamiento, que son componentes globales.

principal.js

El archivo de entrada del programa se ejecuta primero.

babel.config.js

Archivo de configuración de Babel. Babel es un compilador de JavaScript.

paquete.json

La configuración de la información de dependencia introducida por el proyecto vue-cli-service serve --opense puede iniciar abriendo el navegador directamente.

 "scripts": {
    
    
   "serve": "vue-cli-service serve --open",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
 }

ver.config.js

Un archivo de configuración de VUE opcional que se carga automáticamente. Se carga cuando se inicia el proyecto. Utilice module.exportsla configuración expuesta, como desactivar la detección de eslint:

module.exports = defineConfig({
    
    
  // 关闭eslint检测
  lintOnSave: false
 })

Para obtener más información, consulte: vue-config-js

Análisis de enrutamiento de proyectos

Se implementa el enrutamiento en VUE vue-routery el núcleo encuentra el componente de enrutamiento en función de la dirección de enrutamiento, lo que es equivalente a key-valuela operación. Este proyecto utiliza una estructura superior, media e inferior. Los estilos de la parte superior e inferior permanecen sin cambios y cambian en el medio. La parte de búsqueda en el medio se puede separar en un componente común.

Arriba:

abajo:

Estas dos partes pueden convertirse en un componente común sin cambios.

Componentes de encabezado e inferior: el encabezado y el pie de página se utilizan como componentes que no son de enrutamiento, el Inicio (página de inicio) y la Búsqueda (búsqueda) y el Inicio de sesión se utilizan como componentes de enrutamiento.

Componentes no relacionados con el enrutamiento de encabezado y pie de página completados

Para completar la lógica de un proyecto VUE, primero dibuje la página, divida los componentes, muestre los datos dinámicamente y procese el negocio de datos dinámicos. Al crear un componente, es necesario conocer su estructura, estilo y recursos estáticos.

Ejemplo de encabezado

Los proyectos que usan menos para controlar los estilos CSS deben instalar cada vez menos cargador, ejecutar el comando directamente: npm install --save less less-loader@5o package.jsonagregar dependencias directamente al archivo y luego npm installdescargar:

Cree un nuevo encabezado de directorio debajo de componentsla carpeta:

Tenga en cuenta que para identificar el estilo menor, debe agregarlang="less"

<style scoped lang="less">
.footer {
    
    
    background-color: #eaeaea;

    .footer-container {
    
    
        width: 1200px;
        margin: 0 auto;
        padding: 0 15px;

        .footerList {
    
    
            padding: 20px;
            border-bottom: 1px solid #e4e1e1;
            border-top: 1px solid #e4e1e1;
            overflow: hidden;
            padding-left: 40px;

            .footerItem {
    
    
                width: 16.6666667%;
                float: left;

                h4 {
    
    
                    font-size: 14px;
                }

                .footerItemCon {
    
    
                    li {
    
    
                        line-height: 18px;
                    }
                }

                &:last-child img {
    
    
                    width: 121px;
                }
            }
        }

        .copyright {
    
    
            padding: 20px;

            .helpLink {
    
    
                text-align: center;

                li {
    
    
                    display: inline;

                    .space {
    
    
                        border-left: 1px solid #666;
                        width: 1px;
                        height: 13px;
                        background: #666;
                        margin: 8px 10px;
                    }
                }
            }

            p {
    
    
                margin: 10px 0;
                text-align: center;
            }
        }
    }
}
</style>

Pero descubrí que los estilos estaban desordenados y necesitaba usar reset.css para borrar el estilo predeterminado anterior:

restablecer.css

@import "./iconfont.css";
 
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
    
    
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea {
    
     /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
    color: #333;
}


h1 {
    
     font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 {
    
     font-size: 16px; }
h3 {
    
     font-size: 14px; }
h4, h5, h6 {
    
     font-size: 100%; }

address, cite, dfn, em, var, i{
    
     font-style: normal; } /* 将斜体扶正 */
b, strong{
    
     font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt {
    
     font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small {
    
     font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol {
    
     list-style: none; }

/* 重置文本格式元素 */
a {
    
     text-decoration: none; color: #666;}


/* 重置表单元素 */
legend {
    
     color: #000; } /* for ie6 */
fieldset, img {
    
     border: none; }
button, input, select, textarea {
    
    
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
    
    
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置 hr */
hr {
    
    
    border: none;
    height: 1px;
}
.clearFix::after{
    
    
	content:"";
	display: block;
	clear:both;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html {
    
     overflow-y: scroll; }

a:link:hover{
    
    
    color : rgb(79, 76, 212) !important;
    text-decoration: underline;
}

/* 清除浮动 */
.clearfix::after {
    
    
    display: block;
    height: 0;
    content: "";
    clear: both;
    visibility: hidden;
}

Luego en la página index.html:<link rel="stylesheet" href="./reset.css">

Usar componente de encabezado

Para App.vueregistrar este componente utilice:

Código de aplicación.vue:

<template>
  <div>
  	<!--使用组件-->
    <Header></Header>
    <router-view></router-view>
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
// 导入组件
import Header from './components/Header';
import Footer from './components/Footer';

export default {
    
    
  name: 'App',
  components: {
    
    
    Header,
    Footer
  },
  mounted(){
    
    
    // 只发一次
    this.$store.dispatch('categoryList');
  }
}
</script>
<style>
</style>

Los pasos para operar el componente Pie de página son los mismos que para el Encabezado.

Componentes de enrutamiento de construcción

Los componentes de enrutamiento del proyecto se dividen en cuatro: Inicio, Búsqueda, Iniciar sesión y Registrarse , y es necesario instalar vue-routerel enrutamiento npm install --save vue-router. Los componentes de enrutamiento generalmente se colocan en la carpeta de páginas o vistas .

Index.js en el enrutador necesita introducir estos componentes de enrutamiento y exponerlos al mundo exterior.

// 导入路由组件
import Vue from 'vue';
import VueRouter from 'vue-router';

// 使用插件
Vue.use(VueRouter);
// 引入路由组件
import Home from '@/pages/Home';
import Search from '@/pages/Search';
import Login from '@/pages/Login';
import Register from '@/pages/Register';

// 配置路由
export default new VueRouter({
    
    
    // 配置路由 
    routes: [
        {
    
    
            path: "/home",
            component: Home,
            meta: {
    
    
                show: true
            }
        },
        {
    
    
            path: "/search/:keyword?",
            component: Search,
            meta: {
    
    
                show: true
            },
            name: 'search'
        },
        {
    
    
            path: "/login",
            component: Login,
            meta: {
    
    
                show: false
            }
        },
        {
    
    
            path: "/register",
            component: Register,
            meta: {
    
    
                show: false
            }
        },
        {
    
    
            // 页面重定向，访问/重定向到首页
            path: "*",
            redirect: "/home"
        },
    ]
});

Lo anterior solo expone estos componentes, y estos componentes deben main.jsregistrarse en:

Después de declarar el enrutador, siempre que el componente esté registrado, el componente tendrá $routeatributos, que reciben principalmente la información de los parámetros que lleva la ruta, por $routerejemplo, $routerse utiliza para realizar saltos de ruta y transportar parámetros.

Para obtener información sobre el enrutamiento, consulte el sitio web oficial de vue-router .

Finalmente, si desea que el enrutamiento surta efecto, debe agregarlo a App.vue:<router-view/>

Navegación declarativa

Utilice los tres enlaces en la imagen como ejemplo de navegación declarativa y haga clic en el enlace correspondiente para ingresar a la página correspondiente, como hacer clic en la imagen para ingresar a la página de inicio.

Implementación específica: use router-linkla etiqueta para el salto de ruta.

Navegación programática

La navegación programática se utiliza principalmente para enrutamientos que conllevan saltos de parámetros. Por ejemplo, búsqueda de palabras clave :

goSearch()El método definido en el botón de búsqueda.

Implemente este método: la implementación interna se detallará más adelante.

Mostrar y ocultar el componente Pie de página

Si desea ocultar el componente inferior al iniciar sesión o registrarse, puede usar la metainformación de enrutamiento para metaconfigurarlo en el archivo de configuración de enrutamiento index.js:

Simplemente use el valor de obtención donde se aplica este componente de pie de página $route.meta.show.

Parámetros de paso de ruta

Hay dos formas principales de escribir parámetros de enrutamiento. El sitio web oficial explica la diferencia en detalle. Lo principal es que paramspuede ocupar espacios pero no ocupar espacios.queryparamsquery

Lo anterior habló brevemente sobre la navegación programática. A continuación, veamos cómo la navegación programática transfiere parámetros.

Tome la consulta de palabras clave como ejemplo:

El paso de cadenas participa en el paso de parámetros de plantilla

// 字符串传参
this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase())
.catch(err => err)
// 模板传参
this.$router.push(`/search/${
      
      this.keyword}?k=${
      
      this.keyword.toUpperCase()}`)
.catch(err => err)

Parámetros de paso de objetos

La forma más común de pasar parámetros es a través de objetos.

// 对象传参
this.$router.push({
    
    
    name: "search",
    params: {
    
    
        keyword: this.keyword
    },
    query: {
    
    
        k: this.keyword.toUpperCase()
    }
})

Los parámetros deben declararse en la ruta correspondiente name: "search"para identificar esta /searchruta y no se pueden utilizar directamente path.

Úselo $route.params.keywordcon $route.query.kpara obtener el valor especificado.

Reescribir empujar y reemplazar

Utilice directamente el método push o repalce que viene con Vue. Cuando hace clic en la misma ruta varias veces, la consola informará NavigationDuplicatedun error. Aunque no afecta la función del código, no puede tolerar el error rojo.

Este es generalmente un método de escritura fijo que puede usarse para resolver los problemas anteriores.

// 先把VueRouter原型对象的push,先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
 
// 重写push|replace
// 第一个参数：告诉原来push方法，你往哪里跳转（传递哪些参数）
// 第二个参数：成功的回调
// 第三个参数：失败的回调
//  call || apply区别
//  相同点，都可以调用函数一次，都可以篡改函数的上下文一次
//  不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组
VueRouter.prototype.push = function (location, resolve, reject) {
    
    
  if (resolve && reject) {
    
    
    originPush.call(this, location, resolve, reject);
  } else {
    
    
    originPush.call(this, location, () => {
    
    
    }, () => {
    
    
    })
  }
}
 
VueRouter.prototype.replace = function (location, resole, reject) {
    
    
  if (resole && reject) {
    
    
    originReplace.call(this, location, resole, reject);
  } else {
    
    
    originReplace.call(this, location, () => {
    
    
    }, () => {
    
    
    })
  }
}

División de componentes de enlace de tres niveles

El componente de enlace de tercer nivel se utilizará en Inicio, Búsqueda, Detalles y otros componentes, y se puede convertir en un componente público global TypeNav.

Después de importar los recursos estáticos con referencia al componente Encabezado, regístrelo main.jscomo componente global. La ventaja es que se puede importusar en cualquier parte del proyecto sin necesidad. El Encabezado se importó antes porque no estaba main.jsregistrado como componente global.

// 三级联动全局组件
import TypeNav from '@/components/TypeNav';
// 注册为全局组件 arg1: 组件名称 arg2: 当前组件
Vue.component(TypeNav.name,TypeNav)

Luego, <TypeNav/>podemos registrarlo en el index.vue del componente Inicio.

Luego podemos seguir los pasos anteriores para dividir las páginas restantes de la página de inicio en componentes para el registro:

Importe estos componentes y regístrelos:

apéndice

La última información de captura de pantalla que se muestra es esta: