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.
r
o
u
t
e
r
.
g
o
(
0
)
,
打
开
路
由
栈
中
第
一
个
路
由
即
当
前
路
由
。
解
决
方
法
2
:
w
i
n
d
o
w
.
l
o
c
a
t
i
o
n
.
r
e
l
o
a
d
(
)
,
重
加
载
。
解
决
方
法
3
:
t
h
i
s
.
router.go(0),打开路由栈中第一个路由即当前路由。 解决方法2:window.location.reload(),重加载。 解决方法3: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项目过程中所遇到的几个问题,可能存在瑕疵,希望对大家有帮助谢谢大家。后续还会继续更新哦~~ ——————结束——————