Do you see anything wrong with this code

Get Help
#1

Hello,

Do you see anything wrong with this code:

    <template>
    <img alt="Vue logo" src="./assets/logo.png" />
    <NavMenu />
    <router-view />
    <Upload1 />
</template>

<script>

    //import PhotoEditor from "./components/PhotoEditor.vue";
    import Upload1 from "./components/Upload1.vue";
    //<img alt="Vue logo" src="./assets/logo.png" />
    import NavMenu from "./components/NavMenu.vue";

    export default {
        name: "App",
        components: {

            NavMenu,
            Upload1
        },
    };
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

VS code constantly shows this component in red.

Thanks,

#2

what is any , any error ?

#3

I think the problem was with the template in App.vue file.
I wrapped the template contents in a div tag. But when I run it in VScode I see nothing. I mean that nothing appears in the browser!

You can see the file here:

In the codeSandbox everything is correct but when I run it in VS code the result is just a blank page.

I mean if there is a mistake with my code.

#4

Hello.
Iā€™ve looked at the code and thereā€™s nothing wrong with it, most likely the environment around it is the problem.
Please clarify the following:
I assume youā€™re using npm run serve to run your app?
Youā€™ve installed Vetur for VS Code?
If you havenā€™t - please run npm install in terminal in VS Code.
You see any error in browserā€™s developer console?

#5

Thanks for your reply.

I run my app in vs-code and vs-general and didnā€™t use npm. But code runner extension is installed on the vs-code.

Yes, I have installed vetur.

I will use run npm to run my code. And send the result here.
I should state here my app doesnā€™t have package.json.
Because I made it in vs-general.

#6

The vs-code terminal recommends that running " npm run server".
When I run ā€œnpm run serverā€ or ā€œnpm run buildā€ this error appears:

PS H:\Vue(image Editor)_Try\VueJSDotnet_Image_15 _FromVueForum> npm run build
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path H:\Vue(image Editor)_Try\VueJSDotnet_Image_15 _FromVueForum\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open ā€˜H:\Vue(image Editor)_Try\VueJSDotnet_Image_15 _FromVueForum\package.jsonā€™
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Saeed\AppData\Roaming\npm-cache_logs\2021-12-14T16_11_46_483Z-debug.log
PS H:\Vue(image Editor)_Try\VueJSDotnet_Image_15 _FromVueForum>

Sorry, I have packge.json and a file with the name package-lock.json.
Here come my file structure:

Vue-Structure
Vue-Structure1366Ɨ768 113 KB

#7

Try creating same project on disc C:\Projects, without spaces or brackets in the project name

1 Like
#8

Although an unhealthy naming convention for paths, there should be no issue with using a different drive than C:.

Have you deleted the node-modules folder, deleted the cache and re-run npm install?

#9

No, I didnā€™t delete the node-modules folder.
I didnā€™t know I should do this!!
Can you please inform me what is the issue with this folder?

regards,

#10

@lingo1357, when you delete the node-modules folder, you are deleting all the dependencies and its cache. So, re-runing npm install you will reinstall the same dependencies, but without cached data.

#11

In the sandbox I donā€™t see the component in template, but a import statement in use, which may cause error