vue create一个项目后需要注意的问题

Ice冰山

已于 2023-03-02 01:18:36 修改

阅读量188

点赞数

分类专栏： vue项目文章标签： vue Powered by 金山文档

于 2023-03-01 23:47:11 首次发布

本文链接：https://blog.csdn.net/Ice1774/article/details/129292193

版权

vue项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了在Vue开发中遇到组件命名必须使用多单词的情况，提供了解决此问题的方法，即在package.json中调整规则。同时，文章还介绍了如何创建和使用Vue组件的代码模板，包括模板的结构和不同生命周期的方法。

摘要由CSDN通过智能技术生成

组件命名

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')

解决方法

在 package.json 中的 rules 节点添加语句

    "rules": {
      "vue/multi-word-component-names": 0
    }

重启项目即可

快捷注释失效

不好解释，看图

本应该是 “ // ”，但是变成了html注释风格

解决方法

把语言模式改为html

最好再把关联直接配置为html

快捷代码模板

在用户代码片段新建一个全局代码段

导入模板

删除初始化的内容，复制以下模板

{
    "生成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模板"
    }

}

最好重启一下，然后在文件中输入vue即可出现模板

模板浏览

<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>