vue

项目常用eslint配置（Vue/React/TypeScript） 记录一下常用的eslint配置。 Vue项目常用eslint配置 需要安装依赖（Vue这里使用standard扩展和vue插件，所以需要安装) { "devDependencies": { "babel-eslint": "^10.0.2", "eslint": "^6.1.0", "eslint-config-imperative-es6": "^2.1.0", "eslint-config-standard": "^10.2.1", "eslint-plugin-import": "^2.17.2", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.7.1" // vue插件 } } .eslintrc.js文件配置 // https://eslint.org/docs/user-guide/configuring module.exports = { // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。ESLint 一旦发现配置文件中有 "root": true

vue项目初始化工作 1、在assets文件夹中新建 css、js、 img文件夹 2、在css、js文件夹中新建reset.css文件、 rem.js文件、server.js文件 reset.css地址 rem.js地址 serve.js地址 3、在main.js中导入： import setDevice from './assets/js/rem' import './assets/css/reset.css' import './assets/css/style.css' setDevice ( 750 ) 4、新建api文件夹 import server from '../assets/js/server' var menu = function ( url , params ) { return new Promise ( ( resolve , reject ) => { server . get ( url , params ) . then ( res => { resolve ( res ) } ) } ) } export { menu } 5、使用代理的话新建vue.config.js文件 module . exports = { devServer : { proxy : 'xxx请求地址' } } 6、新建store文件夹——新建index.js文件

关于Vue的生命周期我们来看下这个官方的图： 　　 从图中我们很容易看的出Vue组件的生命周期的钩子函数有以下这些： beforeCreate() 创建前 created（）创建 beforeMount()挂载前 mounted（）挂载 beforeupdate（）更改前 updated（）更改 beforeDestroy()销毁前 destroyed（）销毁 下面分别说以下这些生命周期： beforeCreate 这个生命周期如上图所示 实例初始化在这个生命周期遍历 data 对象下所有属性将其转化为 getter/setter，也就是说添加一个被观察者，所以我们平时在项目中遇到在后来添加新的属性视图不更新就是这个原因，在后来被添加的属性，没有被放到观察者对象中去 但是这个时候数据并没有和模板建立链接 还不能操作属性。 created 到这个生命周期的时候 实例已经被创建完毕 属性已经绑定 属性是可以操作的 但是dom还不存在 $el属性还不可以操作 这个生命周期可以进行axios请求 但是这个时候页面还没有被渲染出来 如果请求时间过长的话 会出现长时间的白屏 beforeMount 这个生命周期 el还未对数据进行渲染 还是不能操作dom mounted 这个时候的虚拟dom已经被渲染到了真实的dom上边 这个生命周期里边我们可以做的事情很多 比如数据请求或者赋值操作属性等等

第一：在路由文件中配置：src/router/index.js 第二步： 在服务器端，进行访问配置：nginx 配置方案 location / { try_files $uri $uri/ /index.html; } 更多方案，可以看官网指南； https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90 来源： oschina 链接： https://my.oschina.net/u/575762/blog/3195776

安装插件 配置vscode的go环境变量 https://blog.csdn.net/weixin_41558061/article/details/100741278 配置 ESLint （需安装 Prettier - Code formatter 插件） command + shift + p 打开用户设置 或者 文件->首选项->设置： 搜索：Associations 打开settings.json // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, "files.autoSave": "afterDelay", "files.autoSaveDelay": 3000, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], //

vue子传父，本来是以为是要通过触发一个事件，才能传值到父组件的。 结果原来可以不用的。别人说vuex，太麻烦了。 其实可以不用。那就看看怎么传吧。 先说下场景： 子组件created的时候就请求一些数据，请求来的数据，要传给父组件。此时都还没有触发任何事件。那么要传值给父组件，就要这么做了。（其实很简单的） 子组件代码： xxx.then(res=>{ this.childData = data.res this.$emit('cdata',this.childData) // 刚求完直接$emit }) 然后，父组件就要接收 import Child form 'xxx.vue' <child @childData="getValue($event)"></child> getValue(data){ this.pdata = data } 这样请求完成了，父组件马上就可以获取到了子组件数据了，不用触发事件 来源： https://www.cnblogs.com/luguankun/p/12501639.html

有时候不想使用axios这样的外部依赖，想自己封装ajax，这里有两种方法 方法一，在单个页面内使用 封装的代码如下： beforeCreate () { this.$http = (() => { let createFetch = (type, url, params) => { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState === 4){ if(xhr.status === 200){ var res = xhr.responseText; try { res = JSON.parse(xhr.responseText) } catch (e) {} resolve(res) } else { reject(xhr.responseText) } } } url += url.includes('?') ? '&' : '?' if (type === 'GET') { let serialArr = [] Object.keys(params).forEach(v => { serialArr.push(`${v}=${params[v]}`) }) url +=

标签：<el-autocomplete> 问题1：@keydown.enter事件触发不了 解决：@keydown.native.enter 原因：element-ui自身封装了一层input标签之后，把原来的事件隐藏了，加上.native可以监听到组件根元素的原生事件 转自： https://blog.csdn.net/weixin_30609287/article/details/97191681 问题2：@change事件触发不了 解决：同问题1加上.native 过程： 我发现其他几个事件都用的input说明，只有change用的输入框说明，注意到了这两个不一样。 结果： 我还是不知道这个change事件我用错了还是怎么样，我是想做一个百度贴吧的那种输入框效果的，但是这个change.native只有手动输入值时才会生效，选中下拉框中出现的选项，这个change.native还是没用的。如果有人知道change怎么用，希望可以回复教我一下，谢谢你。 来源： https://www.cnblogs.com/woyujiezhen/p/12499581.html

原因：底层视图高度超出百分百，加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层。 处理：打开弹窗后禁止底层滚动调用stop事件，关闭则开启底层滚动调用move事件。 let mo=function(e){e.preventDefault();}; stop(){ document.body.style.overflow='hidden'; document.body.style.position='fixed'; document.body.style.width='100%'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, move(){ document.body.style.overflow='';//出现滚动条 document.body.style.position='initial'; document.body.style.height='1006px'; document.removeEventListener("touchmove",mo,false); }, 参考相关来源： https://www.cnblogs.com/fanbi/p/9648184.html https://blog.csdn.net/m0_37852904/article/details

vue脚手架工程装了vue-infinite-scoll 后发现就报这个错（整个工程基于nuxt） 检查了一下代码发现并没什么问题 回调方法也没问题 项目也启用了vue-infinite-scoll 最后找到原因了 我在nuxt.config.js中的plugins中先引用的瀑布流，再引用的饿了吗，瀑布流是基于饿了吗，所以要先引用饿了吗 希望能帮到你！点赞收藏或码云搜索KakiNakajima 来源： oschina 链接： https://my.oschina.net/u/4419946/blog/3195363