脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue create 创建项目只有两个文件

解决vue create 创建项目只有两个文件问题

 更新时间：2024年02月08日 11:04:39   作者：请学习好嘛  
这篇文章主要介绍了解决vue create 创建项目只有两个文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue create 创建项目只有两个文件

学习node和vue准备做大数据毕业设计，中途下载vue后使用vue create  aaa 命令创建一个项目时，发现只有两个文件，我花了很多时间去查资料找博文，最终发现是和的我windows下的hadoop安装包冲突了，导致yarn命令发现异常。（本人大数据专业）

解决办法

1.删除hadoop的安装路径，删除hadoop的所有环境变量信息

2.修改C:\Users\你的电脑用户名 下的.vuerc文件，把"packageManager": "yarn"这一行数据里面的yarn替换成npm，由此解决

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

组件命名

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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论