How to install Vue.js

Asked

Viewed 52 times

-2

Good evening to all the programmers. I’ve been struggling to do something that probably for some should be absurdly easy, but I’m not getting it at all. That is, install and run the Vue.

I’ve tried to:

> npm install -g @vue/cli

And appears:

Token não reconhecido no texto de origem.
Em linha:1 caractere:16
+ npm install -g  <<<< @vue/cli
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : UnrecognizedToken

I have tried "npm install Vue", and it arrives to install dependencies, but when opening in live-server it does not run at all.

I already deleted everything and tried to do it again, I tried to apply CDN directly to html...and well, nothing.

Vue via CDN in HTML:

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


 
</head>
  <body>
      

<div id="app">

{{ 2+2 }}
{{ text }}

</div>

<!-- o CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <!-- Meu código Vue -->
    
<script>

const app = new Vue = ({

el:'#app',
data: {
  text: 'test'
}


});



</script>

</body>
</html>

NOTE: I already tried applying the Cdn link to the head, that I had seen it in a course, but it was not also. When you open the HTML, you write exactly what is in the code. " {{ 2 + 2 }}" without the result 4, and "{{ text }}" exactly the same.

I ask for your help please. Thank you!

vue.js

1 answer

-1

Since you are still a beginner in Vuejs, I was always looking to use the installation via Cdn link when working with Vue (a long time ago) and I noticed, among some other things, that the link you are using is not the link that is currently used in the official documentation Starter for the development version.

I recommend you follow the same example as in the documentation to even validate your environment.

The Vuejs documentation is complete and clear, always try to follow the basic examples of the documentation in case of problems, especially at the beginning. It is possible that you are following a course or tutorial already outdated and so the links or syntax do not work, so the ideal is always to be with the documentation 'in case'.

Follow the link to the official Vue.js website: https://br.vuejs.org/v2/guide/

  • Thank you very much for your reply. Simply apply the CDN in the Head tag field, instead of applying at the end of Body, as is "usually recommended" for JS implementations. I believe it is due to the manipulation of Vue with DOM...but, anyway, I’m new enough to be talking some nonsense.

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.