component naming
error: Component name “xxx“ should always be multi-word
import Vue from 'vue'
// import App from './App.vue' 这是原来的
import Demo from './DemoVue.vue' //这是新的,但是会报错
Vue.config.productionTip = false
new Vue({
render: h => h(Demo),
}).$mount('#app')
Solution
Add statements to the rules node in package.json
"rules": {
"vue/multi-word-component-names": 0
}
Just restart the project
Shortcut comment invalid
It's hard to explain, look at the picture
It should be "//", but it has become an html comment style
Solution
Change language mode to html
It is better to configure the association directly as html
Shortcut code template
Create a new global code segment in the user code segment
import template
Delete the initialized content, copy the following template
{
"生成vue模板":{
"prefix": "vue",
"body": [
"<template>",
"\t<div>",
"",
"\t</div>",
"</template>",
"",
"<script>",
"\t// import component from './component.vue';",
"\texport default {",
"",
"\t\tname:'$4',",
"",
"\t\tcomponents: {",
"",
"\t\t},",
"",
"\t\tdata() {",
"",
"\t\t\treturn {};",
"\t\t},",
"",
"\t\tmethods: {",
"",
"\t\t},",
"",
"\t\tprops: {",
"\t\t\t//init:{ default: value }",
"\t\t},",
"",
"\t\tcomputed: {",
"",
"\t\t},",
"",
"\t\twatch: {",
"",
"\t\t\timmediate: true",
"\t\t},",
"",
"\t\tbeforeCreate() {",
"",
"\t\t}, // 生命周期 - 创建之前",
"",
"\t\tcreated() {",
"",
"\t\t}, // 生命周期 - 创建完成(可以访问当前this实例)",
"",
"\t\tbeforeMount() {",
"",
"\t\t}, // 生命周期 - 挂载之前",
"",
"\t\tmounted() {",
"",
"\t\t}, // 生命周期 - 挂载完成(可以访问DOM元素)",
"",
"\t\tbeforeUpdate() {",
"",
"\t\t}, // 生命周期 - 更新之前",
"",
"\t\tupdated() {",
"",
"\t\t}, // 生命周期 - 更新之后",
"",
"\t\tbeforeDestroy() {",
"",
"\t\t}, // 生命周期 - 销毁之前",
"",
"\t\tdestroyed() {",
"",
"\t\t}, // 生命周期 - 销毁完成",
"",
"\t\tactivated() {",
"",
"\t\t}, // 如果页面有keep-alive缓存功能,这个函数会触发",
"\t}",
"</script>",
"",
"<style lang=\"\" scoped>",
"",
"</style>"
],
"description": "生成vue模板"
}
}
It is best to restart, and then enter vue in the file to appear the template
Template browsing
<template>
<div>
</div>
</template>
<script>
// import component from './component.vue';
export default {
name:'',
components: {
},
data() {
return {};
},
methods: {
},
props: {
//init:{ default: value }
},
computed: {
},
watch: {
immediate: true
},
beforeCreate() {
}, // 生命周期 - 创建之前
created() {
}, // 生命周期 - 创建完成(可以访问当前this实例)
beforeMount() {
}, // 生命周期 - 挂载之前
mounted() {
}, // 生命周期 - 挂载完成(可以访问DOM元素)
beforeUpdate() {
}, // 生命周期 - 更新之前
updated() {
}, // 生命周期 - 更新之后
beforeDestroy() {
}, // 生命周期 - 销毁之前
destroyed() {
}, // 生命周期 - 销毁完成
activated() {
}, // 如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style lang="" scoped>
</style>