Precauciones marco 1.vue y experiencia
Vue 1.1 resuelve los parámetros de enrutamiento dinámico, los datos de la página no se actualiza
Descripción del problema:
El enrutamiento dinámico encontró: página / /: componentes de la página de identificación de / página / 1 de conmutación a / página / 2 no se actualiza encontraron
1 solución: dar
<router-view :key="key"></router-view>
...
computed:{
key(){
return this.$route.path + Math.random();
}
}Solución 2: Utilice la nueva v2.2 dentro del componente beforeRouteUpdate
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},1.2 vue componentes en la destrucción de temporizador **
Descripción del problema:
En una página para escribir un temporizador, una vez por segundo de impresión, y luego saltar a la página b, entonces se puede ver, el temporizador sigue en funcionamiento. Solución recomendada: la posición después de haber definido un temporizador a cero el temporizador de $ una vez que este detector de eventos es.
const timer = setInterval(() => {
// 定时器操作
}, 1000)
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})También puede utilizar la instrucción del ciclo de vida:
export default {
beforeDestroy(){
clearInterval(timer);
}
}conjunto de carga 1.3 vue-demanda de dos maneras **
1. determinación => require ([ './ Componenta'], la resolución), como sigue:
const ComponentA = resolve => require(['./ComponentA'], resolve)Uso de 2 () => import (), el código específico es el siguiente:
const ComponentA = () => import('./ComponentA')1.4 entre los componentes, un esquema de comunicación entre los componentes Sons
esquema de comunicación entre los componentes:
- En autobús evento (bus), es decir, enviando suscribirse
- vuex
- componentes Sons:
- componentes de Padres pasar datos a auto-ensamblaje por prop
- eventos personalizados vinculantes sub-componente ,. $ Emit (evento, params) para invocar un evento personalizado a través de este
- Uso vue proporcionó $ método de comunicación árbitros $ padre / $ y los niños
- proporcionar / inject
- La comunicación entre $ attrs componentes profundamente arraigados, $ oyentes
En el uso de 1,5 $ evento vue - obtener el elemento primario actual, los elementos hijos, hermanos
<button @click = “fun($event)”>点击</button>
...
methods: {
fun(e) {
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
#获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
#获得点击元素的第一个子元素
e.currentTarget.firstElementChild
# 获得点击元素的下一个元素
e.currentTarget.nextElementSibling
# 获得点击元素中id为string的元素
e.currentTarget.getElementById("string")
# 获得点击元素的string属性
e.currentTarget.getAttributeNode('string')
# 获得点击元素的父级元素
e.currentTarget.parentElement
# 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
}
}1.6 axios petición http segundo paquete
import axios from 'axios'
import router from '@/router'
import {removeSessionStorage} from './storage';
import Vue from 'vue'
import { Message } from 'element-ui' // 引用element-ui的加载和消息提示组件
// 请求超时时间配置
axios.defaults.timeout = 30000;
// api地址配置
axios.defaults.baseURL = "";
// console.log(process.env.VUE_APP_BASE_API)
Vue.prototype.$http = axios
// 在全局请求和响应拦截器中添加请求状态
let loading = null
// 请求拦截器
axios.interceptors.request.use(
config => {
config.headers = {
'Content-Type': 'application/json'
};
// loading = Loading.service({ text: '拼命加载中' })
let token = sessionStorage.getItem('-_token_-');
if (token) {
config.headers['token'] = token;
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
response => {
if (loading) {
loading.close()
}
// 自定义错误码，各公司根据约定都不一样
// 此处省略业务处理代码
let errorCode = response.data.errCode;
if(errorCode==='000000'){
return Promise.resolve(response.data);
}else {
router.push({
name: 'error',
params: {
isTimeout: false,
path: router.currentRoute.path,
desc: '您请求的资源找不到(错误码：404) ',
},
});
}
},
error => {
if (loading) {
loading.close();
}
// 此处省略业务处理代码
return Promise.reject(error);
}
);configuraciones de conmutación entorno proxy 1.7 desarrollo
Para hacer frente a este escenario de varios dominios, durante el desarrollo de código, devserver a un agente local para la parte de atrás, durante la prueba, sino también para modificar el agente al entorno de prueba, en la línea, puesta en marcha nuevo problema puede ser la de Agencia de Medio Ambiente en línea
El entorno operativo de código para Node.js, el uso process.env puede entrar en las variables de entorno del sistema para distinguir la máquina actual es la maquinaria de producción de la empresa, o una máquina de desarrollo personal
Para ser vue.config.js configuración
const Timestamp = new Date().getTime(); //当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳
const proxyTargetMap = {
prod: 'https://xxx.xxx.com/',
dev: 'http://192.168.200.230:6379',
test: 'http://test.xxx.com',
local: 'http://localhost:8080/'
}
let proxyTarget = proxyTargetMap[process.env.API_TYPE] || proxyTargetMap.local
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false, // 是否开启eslint保存检测
productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
chainWebpack: () => { },
//configureWebpack 这部分打包文件添加时间戳，防止缓存不更新
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
},
},
devServer : {
proxy: {
'/api' : {
target: proxyTarget,
changeOrigin: true,
pathRewrite: {
'^/api' : ''
}
}
}
}
};En correspondencia con la configuración package.json
Véase la siguiente cruzada env API_TYPE = dev
cruz-ENV es una herramienta de línea de comando global que puede cambiar las variables de entorno actuales basados en diferentes plataformas, permitiendo a los desarrolladores pueden estar en la máquina, el modo de desarrollo de llamada selectiva o el modo de producción
"scripts": {
"serve": "vue-cli-service serve --mode development",
+ "serve:dev": "cross-env API_TYPE=dev vue-cli-service serve --mode development",
+ "serve:test": "cross-env API_TYPE=test vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode production",
"test": "vue-cli-service build --mode test",
},