解決vue create 創(chuàng)建項目只有兩個文件問題

更新時間：2024年02月08日 11:04:39 作者：請學習好嘛

這篇文章主要介紹了解決vue create 創(chuàng)建項目只有兩個文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue create 創(chuàng)建項目只有兩個文件

學習node和vue準備做大數(shù)據(jù)畢業(yè)設計，中途下載vue后使用vue create aaa 命令創(chuàng)建一個項目時，發(fā)現(xiàn)只有兩個文件，我花了很多時間去查資料找博文，最終發(fā)現(xiàn)是和的我windows下的hadoop安裝包沖突了，導致yarn命令發(fā)現(xiàn)異常。（本人大數(shù)據(jù)專業(yè)）

解決辦法

1.刪除hadoop的安裝路徑，刪除hadoop的所有環(huán)境變量信息

2.修改C:\Users\你的電腦用戶名下的.vuerc文件，把"packageManager": "yarn"這一行數(shù)據(jù)里面的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 節(jié)點添加語句

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

重啟項目即可

快捷注釋失效

不好解釋，看圖

本應該是 “ // ”，但是變成了html注釋風格

解決方法

把語言模式改為html

最好再把關聯(lián)直接配置為html

快捷代碼模板

在用戶代碼片段新建一個全局代碼段

導入模板

刪除初始化的內(nèi)容，復制以下模板

{
    "生成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},  // 生命周期 - 創(chuàng)建之前",
            "",
 
            "\t\tcreated() {",
            "",
            "\t\t},  // 生命周期 - 創(chuàng)建完成（可以訪問當前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緩存功能，這個函數(shù)會觸發(fā)",
            "\t}",
 
            "</script>",
            "",
 
            "<style lang=\"\" scoped>",
            "",
            "</style>"
 
        ],
 
        "description": "生成vue模板"
    }
 
}

最好重啟一下，然后在文件中輸入vue即可出現(xiàn)模板

模板瀏覽

<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() {
 
        },  // 生命周期 - 創(chuàng)建之前
 
        created() {
 
        },  // 生命周期 - 創(chuàng)建完成（可以訪問當前this實例）
 
        beforeMount() {
 
        },  // 生命周期 - 掛載之前
 
        mounted() {
 
        },  // 生命周期 - 掛載完成（可以訪問DOM元素）
 
        beforeUpdate() {
 
        },  // 生命周期 - 更新之前
 
        updated() {
 
        },  // 生命周期 - 更新之后
 
        beforeDestroy() {
 
        },  // 生命周期 - 銷毀之前
 
        destroyed() {
 
        },  // 生命周期 - 銷毀完成
 
        activated() {
 
        },  // 如果頁面有keep-alive緩存功能，這個函數(shù)會觸發(fā)
    }
</script>
 
<style lang="" scoped>
 
</style>