the project project is as follows, zhoulujun/webpack4-vue2-project-template

and then find out,

mounted () {
this.$ref.demo.clientWidth;// gets the parent node width
this.$ref.demo.clientHeight;// value is 0

this.$nextTick (() = > {
this.$ref.demo.clientWidth;// gets the parent node width
this.$ref.demo.clientHeight;// value is 0
});
setTimeout (() = > {/ / you can get the correct value
this.$ref.demo.clientWidth;
this.$ref.demo.clientHeight;
})
}

if style=" indicates width and height "directly on the element, it can be obtained.

or remove lang= "less" from style | | lang= "scss"

< style >
.demo {"indicates width, height"}
< / style >

at first I thought it was webpack happyPack, then removed all happyPack, found that this is still the case, and then modified the less sass loader configuration

{
test: /. (less) $/,
use: [
"vue-style-loader",// adds styles to dom through style tags
" style-loader",
"sass-loader"
]
},

found that the width and height still could not be obtained.
ask which god to solve the doubt, thank you!