快捷導(dǎo)航

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

更新時(shí)間：2024年02月08日 11:04:39 作者：請(qǐng)學(xué)習(xí)好嘛

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

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

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

解決辦法

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

2.修改C:\Users\你的電腦用戶名下的.vuerc文件，把"packageManager": "yarn"這一行數(shù)據(jù)里面的yarn替換成npm，由此解決

vue create一個(gè)項(xiàng)目后需要注意的問題

組件命名

error: Component name “xxx“ should always be multi-word

import Vue from 'vue'
// import App from './App.vue'       這是原來的
import Demo from './DemoVue.vue'      //這是新的，但是會(huì)報(bào)錯(cuò)
 
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(Demo),
}).$mount('#app')

解決方法

在 package.json 中的 rules 節(jié)點(diǎn)添加語句

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

重啟項(xiàng)目即可

快捷注釋失效

不好解釋，看圖

本應(yīng)該是 “ // ”，但是變成了html注釋風(fēng)格

解決方法

把語言模式改為html

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

快捷代碼模板

在用戶代碼片段新建一個(gè)全局代碼段

導(dǎo)入模板

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

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