Do you see anything wrong with this code

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,

what is any , any error ?

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.

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?

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.

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:

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

1 Like

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?

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,

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

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