Vue的问题总结
原创
1. vue cli创建的项目
输出output，查看loader配置 vue inspect > output.js
更新vue-clivue upgrade
检测项目依赖哪些可以更新npm-check-updates
含sourcemap的项目 ctrl + P 查看vue文件源码
2. 动态将componets目录下的组件挂载到全局
import Vue from 'vue'
const componentsContext = require.context('@/components', true, /index.vue$/)
console.log('componentsContext', componentsContext)
componentsContext.keys().forEach((component) => {
const componentConfig = componentsContext(component).default
Vue.component(componentConfig.name, componentConfig)
})3. 使用插件axios时：
1. 上传文件，设置请求头，需要使用new Headers() :
// 文件上传
async function FileHttp(options: IOptions) {
const token = await DeviceStorage.getItem('QunYingToken');
const { url, params } = options;
let parameter = new FormData();
parameter.append('token', token);
parameter.append('timestamp', new Date().getTime());
parameter.append('sign', md5.hex_md5(new Date().getTime() + 'QunYingCheck'));
parameter.append('imgurl', params);
console.log('parameter=', JSON.stringify(parameter));
console.log('url=', url);
let headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'multipart/form-data');
return fetch(baseURL1 + url, {
method: 'post',
headers: headers,
body: parameter
})
}4. 淘宝镜像下载依赖
npm install --registry=https://registry.npm.taobao.org5. vue-cli 全局引入公共的样式文件变量
- 作用：
导入css 预处理器的一些公共的样式文件变量，比如：variables , mixins , functions，避免在每个样式文件中手动的@import导入，然后在各个css 文件中直接使用变量。
2. 配置
https://github.com/yenshih/style-resources-loader
npm i less less-loader@7.x style-resources-loader vue-cli-plugin-style-resources-loader -D// vue.config.js
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 这个是绝对路径,不能使用 alias中配置的别名路径，如@表示的src
path.resolve(__dirname, './src/style/params.less')
]
}
},
……
其他配置
……
}6. vuex刷新数据丢失问题解决
export default {
name: 'App',
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}7. 控制详情返回保持查询条件，其他进入重置查询条件
beforeRouteEnter(to, from, next) {
if (!(from.path === '/outsideMsg/taskview')) {
next((vm) => {
vm.scrollY = 0
vm.handleReset()
})
} else {
next()
}
},原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
目录