Cómo optimizar proyectos de Vue
Esta vez les mostraré cómo optimizar el proyecto Vue y cuáles son las precauciones para optimizar el proyecto Vue. El siguiente es un caso práctico, echemos un vistazo.
La estructura del proyecto en el desarrollo de proyectos de clase Vue es básicamente similar al método de generación Vue-cli. En este método de desarrollo, el modo más comúnmente utilizado es habilitar el agente para la depuración simulada o la depuración remota, es decir. es Utilice la tabla proxy configurada establecida por Vue-cli o utilice directamente la opción de proxy proporcionada por Webpack-dev-server.
Utiliza /nodejitsu/node-',
puerto: 8838,
receptor: '',
puerto: 8838,
receptor: ''
}
}Obtener código de proxyTable:
// Procesar proxyTable
const releaseConfig = require( '.. /config/release.conf.js')
const rdConfig = releaseConfig[process.env.npm_config_rd]
const isAllRemote = process.env.npm_config_focus
const useHost = isAllRemote || Process.env.npm_config_host
// Ya sea para desarrollar localmente, el desarrollo remoto local apuntará a local
const isAllLocal = Process.env.npm_config_allLocal
module.exports = función (proxy) {
const localUrl = `'
const localProxyPort = proxy.localProxyPort 8787
const finalConfig = formatReleaseConfig(releaseConfig)
const remoto = finalConfig.remote || {}
if (process.env.npm_config_rd) {
if (!rdConfig) {
throw new TypeError('El nombre de la máquina RD no existe, configúrelo en config/release.conf.js')
}
if ( !remote.ip) {
throw new Error('Configure el receptor de la tercera máquina')
}
}
if (isAllRemote amp; !rdConfig) {
throw new TypeError('el enfoque solo se puede establecer si se proporciona el nombre rd')
}
función formatReleaseConfig (config) {
resultado constante = {}
Object.keys(config).map((key) =gt; {
valor constante = config[clave]
const ipMatch = (value.receiver || '').match(/:\/\/(.*?):\d/)
const ip = ipMatch & ipMatch[1]
resultado[clave] = {
ip,
host: valor
e.host || host predeterminado,
puerto: valor.puerto || '8391'
}
})
// Establecer control remoto
if (rdConfig) {
const ipMatch = (rdConfig.receiver || '').match(/:\/\/(.*?):\d /)
const ip = ipMatch amp; ipMatch[1]
resultado.remote = {
ip,
host : rdConfig .host || host predeterminado,
puerto: rdConfig.port || '8391'
}
}
// establecer local
resultado.local = {
ip: 'localhost',
host: 'localhost',
puerto: localProxyPort
}
devolver resultado
}
función setProxy (proxyTable) {
resultado const = {}
Object.keys(proxyTable).forEach((api) =gt; {
let type = proxyTable[api]
const isCustomType = tipo de tipo = == 'string' amp !/^
Comando de inicio:
npm run dev
npm run dev --allLocal Nota: En este momento proxyTable Todos los controles remotos configurados in se convierten a local y todos los tipos personalizados se convierten a local en el parámetro allLocal
Local 1 remoto
Configuración del host: Ninguno
Configuración del silbato: predeterminada nombre de dominio
127.0.0.1 dev1.example.com
127.0.0.1 dev2.example.com comando de inicio:
npm run dev - -rd=rd1
npm run dev --rd=rd1 --host Nota: --host significa usar host en lugar de ip para el acceso. La dirección del host es necesaria al usarlo
N local. Control remoto de Taiwán
Configuración del host: ninguna
Configuración del silbato: nombre de dominio predeterminado
127.0.0.1 dev1.example.com
127.0. 0.1 dev2.example.com
{
proxyTable: {
'/api1': 'rd1',
'/api2 ': 'rd2',
'/auth/xx': 'local',
'/other': ''
}
}Configuración de proxyTable:
Comando de inicio:
>
npm ejecuta dev remoto 1 máquina
Configuración del host:
1.1.1.1 dev1.example.com
1.1.1.1 dev2.example. configuración: nombre de dominio predeterminado
127.0.0.1 dev1.example.com
127.0.0.1 dev2.example.com comando de inicio:
npm run dev - - rd=rd1 --focus componente optimización
Todos adoran la componenteización de Vue. El grado de desmantelamiento razonable de los componentes depende del tamaño del proyecto. Los proyectos pequeños se pueden completar con solo unos pocos componentes. Ni siquiera necesita vuex, axios, etc. Si la escala es grande, debe subdividir los componentes. Cuanto más pequeños, mejor, incluida la encapsulación del diseño, botones, formularios, cuadros de aviso, carruseles, etc. No tengo tiempo para escribir el código de la biblioteca de componentes de Element. Para escribir con tanto detalle, puede usar directamente la biblioteca de Element. La optimización de componentes tiene un significado claro y solo maneja negocios similares. Cuanto mayor sea la reutilización, mejor y cuanto mayor sea la configurabilidad, mejor. Si encapsula el componente usted mismo, aún debe seguir las reglas de configuración del refinamiento de accesorios. Al clasificar los componentes, habitualmente los divido en tres categorías: página, elemento de página y diseño. La página es la parte del control de enrutamiento. El elemento de página pertenece a cada bloque de diseño de la página, como banner, lateral, etc. coloque al menos componentes que aparecen dos veces en el diseño, como ícono, desplazamiento superior, etc.
Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a. ¡Otros artículos relacionados en el sitio web de Gxl!
Lectura recomendada:
Explicación detallada del caso práctico del proyecto redux-thunk
Cómo utilizar el mecanismo de enlace de datos Angular