vue--使用vue过程中所遇问题的解决方法_安装的sass保存没有括号-CSDN博客

本文链接：https://blog.csdn.net/yanmuchen/article/details/97135023

文章目录

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()
        }
      }
    },