vue--使用vue过程中所遇问题的解决方法

文章目录

2.Axio表单请求3.vue-cli 3.0集成sass/scss到vue项目4.scss与sass的不同写法5.vue路由传递并获取参数（参数为对象）6.webpack指令7.解决vue中console.log打印报错问题8.获取自定义属性9.axios的跨域解决方法10.vue页面跳转的两种方式11.vue请求服务器图片403报错12.data中如何正确定义图片路径13.父组件调用子组件的方法，可应用于调用ui框架封装好的底层的方法，当某些方法需要我们手动控制是否调用的时候14.vue中watch监听不能执行methods函数的原因

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