本文目录
- 1.node-sass安装失败
- 2.动态引入和绑定背景图片
- 3.element批量删除功能实现
- 4.element提供的上传组件解决无权限的问题
- 5.写在data中的数据无法讲改变动态渲染到页面上
- 6.vue中定义全局变量的方法
- 7.beforeRouteEnter的书写位置
- 8.解决vue路由警告问题
- 9.让VScode保存时自动匹配ESlint规则
1.node-sass安装失败
使用别人的一个模板项目的时候，在npm install的时候报错提示node-sass啊没装失败，出现原因是npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。
解决方法是首先把node_modules文件夹删除，然后运行指令npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/先单独安装node-sass，再启用npm install安装其他依赖。
2.动态引入和绑定背景图片
vue中动态改变backgroundimage的写法
:style="{backgroundImage:'url(\''+themeBg+'\')'}"
动态的在data中引入路径的写法
themeBg: require("../../assets/images/e_center.png"),
3.element批量删除功能实现
在el-table标签中绑定事件 @selection-change="batchRemove"
batchRemove(val){
console.log(val)
},
打印出来的是选中的列的数组集合
4.element提供的上传组件解决无权限的问题
解决思路：手动设置请求头
1.定义变量，获取token
const token = localStorage.getItem("access-token");
2.在data中设置要改变的请求头的信息MyHeader
MyHeader: { Authorization: token }
3.组件中动态传入headers，即可解决401问题。
<el-upload class="upload-area" action="http://192.168.0.88:18002/api-operate/clouddocms/files/upload" :headers="MyHeader">
<el-button icon="el-icon-upload" size="primary" type="primary">点击上传
</el-button>
</el-upload>
5.写在data中的数据无法讲改变动态渲染到页面上
项目场景：数据确定会正常改变，但是变化不会自动触发页面上的显示，但是功能是正常的。
原因：就算数据是在data存在了，但是赋值的时候把某个属性给丢失了，vue也就失去了对其的检测能力。也就是说，在data中存在的数据以及对象属性需要一直存在，否则vue就会失去对其变化的监控。
6.vue中定义全局变量的方法
在mainjs中进行定义并将其挂载到vue实例中
var baseUrl = "http://110.50.111:8090";
Vue.prototype.$baseUrl = baseUrl
组件内进行使用
methods: {
asd() {
console.log(this.$baseUrl);
}
},
mounted() {
this.asd()
}
全局引用js直接在main.js中引用，就可以import remtools from './assets/js/setrem'
但是这个js只有在项目第一次加载的时候执行一次，切换路由的时候并不触发这个js
7.beforeRouteEnter的书写位置
beforeRouteEnter必须放在页面文件中，组件是监听不到路由的
beforeRouteEnter (to, from, next) {
if (from.path === '/detail') {
next((vm) => {
// 更新列表数据方法
vm.updateData()
})
}
next()
},
8.解决vue路由警告问题
下面这三行是解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的方法，把代码放置到router文件夹的index.js文件中即可
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error=> error)
}
9.让VScode保存时自动匹配ESlint规则
首先需要找到VScode配置文件setting.json
- ctrl+shift+p
2.输入setting
3.选择 首选项：打开设置（json）即可.
这个文件存放的是一个JSON格式的数据，在{}中的最后增加如下代码
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
这样的话，在修改代码只需要ctrl+s保存代码，代码规则就会自动按照ESlint的配置规则进行调整。
网友评论