vue&vue-cli 3.0项目中遇到的有趣问题

一、vue-cli使用jQuery的问题

博主因为之前前端项目中使用习惯了jquery，所以尝试在vue-cli项目中嵌入jquery，博主使用的是vue-cli3.0，以下适用于vue-cli3.0版本具体步骤如下：
1、在项目最外层新建vue.config.js文件，编写代码：

const webpack = require('webpack')
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery",
            })
        ]
    },
}

2、在main.js文件中全局引用：

import Vue from 'vue'
import App from './App.vue'
import $ from 'jquery'

Vue.config.productionTip = false

new Vue({
  $,
  render: h => h(App)
}).$mount('#app')

3、在需要使用的地方引入：
@import $ from ‘jquery’
4、重启项目，修改vue.config.js文件内容需要重启项目才可生效。

二、vue解决跨域问题

vue-cli项目在进行数据请求时会将请求地址拼接在本地地址http://localhost:8080上，因为不是服务器地址所以会请求不到数据，这就需要给服务器请求地址设置一个代理，博主使用的是vue-cli3.0版本，具体设置如下：
1、在项目最外层新建vue.config.js文件，编写代码：

const webpack = require('webpack')
module.exports = {
    devServer: {
        proxy: {//代理内容可以多个，如下
            '/jxweb': {//服务器地址开头
                target: 'wwww://rw.starlink.com', //API服务器的地址
                ws: true, //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {  //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc',不设置就不重写
                    '^/jxweb': ''
                }
            },
            '/web': {
                target: 'wwww://rw.starlink.com', //API服务器的地址
                ws: true, //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {  //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                    '': ''
                }
            },
        },
    },
}

2、重启项目，修改vue.config.js文件内容需要重启项目才可生效。

三、新建vue项目build之后路径错误的问题

博主在新建的vue-cli项目打包之后访问，发现打开页面空白，打开前端控制台一片报红，说找不到路径。

通过四方查找，博主发现，新版vue-cli3.0的webpack需要重新配置，具体步骤如下：
1、在项目最外层新建vue.config.js文件，编写代码：

const webpack = require('webpack')
module.exports = {
    publicPath:'./',//访问路径
    outputDir:'OceanFocus',//打包文件
    assetsDir:'static',//静态资源包
}

2、重启项目，修改vue.config.js文件内容需要重启项目才可生效。

四、vue中router路由相同无法跳转的问题

解决方法1：this.$router.go(0)，打开路由栈中第一个路由即当前路由。解决方法2：window.location.reload()，重加载。解决方法3：this.$router.push({ path:"/xxx", query:{ t:Date.now(), }, });，在里面设置随机改变的参数值，表面上了同一个路由，本质上内部传值一直在改变，并不是完全一样的路由了。

五、无法修改element-ul默认css样式的问题

详细可以参考博主博客
修改element-ui默认css样式的解决方法

六、vue项目设置页面名称的问题

在html文件中我们可以在html标签中的title标签设置当前页面的名称，但是vue使用的是虚拟Dom，所编写的文件不存在html和title标签，这该怎么办呢，具体解决步骤如下：
1、在路由配置文件中，配置路由的使用新增meta属性在里面添加一个表示名称的参数：

const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import('../views/Index.vue'),
    meta: {
      title: '-首页'
    }
  },
]

2、在main.js文件中遍历路由，代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title ='页面名称'+to.meta.title
  }
  next()
})

七、vue项目设置固定导航栏，点击router-link无法返回页顶的问题

当你用router-link设置了一个固定头导航栏的时候，一个页面下滑到某个位置，但你点击另一个页面你会发现，新页面也是在某个位置展示而不回到页顶，经过博主查找我发现两种解决措施：
方法1:在路由配置文件里面设置 scrollBehavior: () => ({ y: 0 }),每次路由改变第一件事返回页顶。详细代码如下：

const router = new VueRouter({
  mode:'hash',
  scrollBehavior: () => ({ y: 0 }),
  routes
})

方法2：在导航栏对应子页面的mounted中添加$(“html,body”).animate({“scrollTop”:0},1);让页面出现第一件事滑到页顶，详细代码：

        mounted(){
            $("html,body").animate({"scrollTop":0},1);
        },

八、相同router重复访问报红的问题

问题描述

这个报红没有什么实际影响，但是出现bug心里不服输，所以博主寻找到了解决办法，在路由配置文件中添加如下代码：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

九、设置输入框默认值字体颜色的问题

设置代码：

    input::placeholder{  //通过这个设置
        color: red !important;
    }

效果：

十、router路由监控的问题

方法1：watch，在需要的页面增加watch

watch:{
  $route(to,from){
    console.log(to.path);
  }
},

或者

watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

或者

// 监听,当路由发生变化的时候执行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

方法2：key是用来阻止“复用”的。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
  export default {
    name: "App",
    computed: {
      key() {
        return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
      }
    },
  };
</script>

方法3：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

	beforeRouteEnter (to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当钩子执行前，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    },

十一、数据监控的问题

方法1：通过watch监听data数据的变化，数据发生变化时，就会打印当前的值。

watch: {
  data(val, newval) {
    console.log(val)
    console.log(newval)
  }
 }

方法2：通过watch监听docData数据的变化，数据发生变化时，this.change_number++（使用深度监听）

watch: {
  docData: {
   handler(newVal) {
    this.change_number++
   },
   deep: true,　　immediate: false,
  }
}

方法3：通过watch监听data数据的变化，数据发生变化时,执行changeData方法

watch: {
  data： 'changeData' // 值可以为methods的方法名
}，
methods: {
   changeData(curVal,oldVal){
  　　　 conosle.log(curVal,oldVal)
　　}
}

博主使用的第三种方法，并且成功了

十二、vue数据实时

在App.vue的router-view标签中，增加属性key，并赋值一个随机变量，具体代码如下：

<template>
  <div id="app">
    <router-view :key="key"/>
  </div>
</template>
<script>
  export default {
    name: "App",
    computed: {
      key() {
        return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
      }
    },
  };
</script>

以上就是博主目前在进行vue&vue-cli3.0项目过程中所遇到的几个问题，可能存在瑕疵，希望对大家有帮助谢谢大家。后续还会继续更新哦~~ ——————结束——————