vue--使用vue过程中所遇问题的解决方法
记录一些学习并使用vue开发项目时遇到的问题，并提供一些解决方案，以防万一再次遇到同样的问题能快速的解决，毕竟人的记忆力有限，太久没接触容易遗忘，如果我的记录对他人也有帮助那当然就更好啦。
·
文章目录
2.Axio表单请求
const axiosForm = (params, url) => {
return new Promise(function (resolve, reject) {
axios({
url: url,
method: 'post',
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function (response) {
resolve(response.data)
}).catch(function (error) {
reject(error)
});
})
}
3.vue-cli 3.0集成sass/scss到vue项目
vue-cli 3提供了两种方式集成sass/scss：
- 创建项目的时候选择预处理器sass
- 手动安装sass-loader
（1）方式一： - 在构建项目的时候，移动上下键选择“Manually select features”，手动选择创建项目的特性，
$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
- 移动上下键在CSS Pre-processors，按提示点击空格键选择CSS-processors，然后再选择第一个SCSS/SASS作为我们的CSS预处理器，最后完成后项目会帮我们安装sass-loader node-sass
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
LESS
Stylus
（2）方式二：
- 安装
npm install -D sass-loader node-sass
- 使用
<style lang="scss">
$color = yellow;
</style>
感谢★,°:.☆(￣▽￣)/$:.°★ 。码经笔记
4.scss与sass的不同写法
scss:与css类似
<style lang="scss">
h1 {
color: red;
}
</style>
sass:不能使用大括号，使用回车和至少两个空格来区分选择器和规则
<style lang="sass">
h1
color: red
</style>
如果你使用了lang=“sass”，却使用了大括号{}，那就会报如下错误：
5.vue路由传递并获取参数（参数为对象）
传递参数方式一：
<router-link
:to="{
path: 'yourPath',
params: {
name: 'name',
dataObj: data
},
query: {
name: 'name',
dataObj: data
}
}">
</router-link>
传递参数方式二：
<template>
<button @click="sendParams">点击传递参数</button>
</template>
<script>
export default {
data () {
return {
msg: 'xxxxx'
}
},
methods: {
sendParams () {
this.$router.push({
path: 'yourPath',
name: '需要跳转的那个路由名称',
params: {
name: 'name',
dataObj: this.msg
}
})
}
}
}
</script>
- path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
- params -> 是要传送的参数,参数可以直接key:value形式传递
- query -> 是通过 url 来传递参数的同样是key:value形式传递
获取参数：
<template>
<h3>msg</h3>
</template>
<script>
export default {
data () {
return {
msg: ''
}
},
methods: {
getParams () {
// 取到路由带过来的参数
let routerParams = this.$route.params.dataobj
// 将数据放在当前组件的数据内
this.msg = routerParams
}
},
watch: {
// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
'$route': 'getParams'
}
}
</script>
6.webpack指令
- 删除全局webpack-cli：
npm uninstall -g webpack-cli - 删除本地webpack-cli:
npm uninstall webpack-cli - 删除全局webpack
npm uninstall -g webpack - 删除本地webpack
npm un webpack - 全局安装webpack:（官网不推荐）
npm install --global webpack - 本地安装webpack:
npm install --save-dev webpack - 本地安装webpack -cli (使用 webpack 4+ 版本)
npm install --save-dev webpack-cli
检查webpack是否安装成功,出现版本号为成功。
如果是全局安装则：webpack -v
如果是本地安装则：node_modules.bin\webpack -v (注意是斜杆的方向)
7.解决vue中console.log打印报错问题
报错：error: Unexpected console statement (no-console) at src\App.vue:29:5:、
在根目录创建.eslintrc.js文件
内容：
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
8.获取自定义属性
<div v-for="item in list" :key="item.id" :data-id="item.id" @click="col($event)">
col(){
console.log(e.target.getAttribute('data-id'))
}
9.axios的跨域解决方法
假设你请求的完整接口地址为：
http://xxxxxx.cn:8321/api/AgriBaseService/queryAgriBaseGoods
那么在根目录创建vue.config.js文件，添加配置信息如下：
module.exports = {
publicPath: "./",
assetsDir: "assets",
devServer: {
port: 8080,
open: true, //配置自动启动浏览器
proxy: {
'/api': {
target: 'http://xxxxxx.cn:8321/api/', //对应自己的接口
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
最终请求的接口被代理为：
http://localhost:8080/api/AgriBaseService/queryAgriBaseGoods
10.vue页面跳转的两种方式
- 标签跳转
<router-link to='two.html'><button>点我到第二个页面</button></router-link>
- 点击事件跳转
<button @click="hreftwo" class="test-one">点我到第二个页面</button>
methods:{ //跳转页面
hreftwo(){
this.$router.push({ path:'/two.html' })
}
}
11.vue请求服务器图片403报错
解决办法：
在index.html中的head中添加
<meta name="referrer" content="no-referrer" />
就可以了
12.data中如何正确定义图片路径
export default {
data() {
return {
imgSrc: '../../assets/images/icon_favorites.png',//错误，图片无法显示
imgSrc: require('../../assets/images/icon_favorites.png'),//正确
}
}
}
13.父组件调用子组件的方法，可应用于调用ui框架封装好的底层的方法，当某些方法需要我们手动控制是否调用的时候
子组件：
<template>
<div></div>
</template>
<script>
export default {
methods:{
childMethod(flag) {
console.log(flag)
}
},
created(){
}
}
</script>
父组件： 在子组件中加上ref即可通过this.$refs.ref.method调用
<template>
<div @click="parentMethod">
<children ref="child1"></children>
</div>
</template>
<script>
import children from 'components/children/children.vue'
export default {
data(){
return {
flag: true
}
},
components: {
'children': children
},
methods:{
parentMethod() {
console.log(this.$refs.child1) //返回的是一个vue对象，所以可以直接调用其方法
this.$refs.child1.childMethod(this.flag);
}
}
}
</script>
14.vue中watch监听不能执行methods函数的原因
watch监听的时候使用了箭头函数，所以watch中的函数没有执行，正确的做法是应该使用function来定义函数：其实就是this指向的问题。
watch:{
// 监听的参数是demo（在watch监听的时候使用function定义即可，不要使用箭头函数）
demo:function(val) {
alert(val)
if (val) {
this.init()
}
}
},
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献7条内容
所有评论(0)