1、启动项目,浏览器自动打开
在package.json文件中sever属性值后面加--open
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
2、eslint校验关闭
在根日录下,创建个vue.config.js ,设置lintOnSave: false
module.exports = {
lintOnSave: false,
}
3、src文件简写方法,配置别名
在根日录下,创建个jsconfig·json
配置别名@表示 [@代表的是src文件夹,这样将来文件过多,找的时候方便很多]
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"] //不能再node_modules和dist中使用
}
4、路由传参的方式
1.字符串传参
this.$router.push("/webSocket/"+this.ken+"?ken1="+this.ken1)
路由配置:
{path: '/
webSocket/:
ken', name: ‘
webSocket’, component: D}
2.模板字符串传参
this.$router.push(`/webSocket/${this.ken}?ken1=${this.ken1}`)
路由配置:
{path: '/
webSocket/:
ken', name: '
webSocket', component: D}
3.push参数 或 对象传参
parmas:传参
this.$router.push({
path:`/webSocket/${this.ken}`,
})
this.ken = this.$route.params.ken
路由配置:
{path: '/
webSocket/:
ken', name: '
webSocket', component: D}
this.$router.push({
name:'webSocket',
params:{ken:'11111111'}
})
路由配置:
{path: '/
webSocket/:
ken', name: '
webSocket', component: D}
如果路由配置为
path: '/
webSocket/:
ken',
则任何时候都可以获取到
this.$route.params.ken。地址栏(http://localhost:8013/webSocket/11111111)如果路由配置为
path: '/
webSocket',
可以看出地址栏(http://localhost:8013/webSocket)不会带有传入的参数,且再次刷新页面后参数会丢失。
query传参
this.$router.push({
name:'webSocket',
query:{ken1:'222222'},
})
路由配置:
{path: '/
webSocket/:
ken', name: '
webSocket', component: D}
this.ken1 = this.$route.query.ken1
this.$router.push({
path:'/webSocket',
query:{ken1:'222222'},
})
this.ken1 = this.$route.query.ken1