Tips for using Vue.com Ponent:

Use Vue.com ponent (…). The sample code is as follows

<div id="app-dands">
  <my-component-dands v-bind:class="{ active: isActive }"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// Here component must be defined before 'var app-dands = new Vue'
  Vue.component('my-component-dands', {
    template: '
Hi, Vue! 
'
  });
  var appDands = newVue({... });Copy the code

The Vue.component() definition must precede app-dands new Vue, otherwise, if Vue.component follows, the following error will be reported:

Vue Single file component

Path: cn.vuejs.org/v2/guide/si…

Using the Vue single-file component solves several of the shortcomings of Vue.com Ponent in the above urls.

Vue CLI provides scaffolding to help us simplify environment building, Vue CLI: cli.vuejs.org/zh/guide/

Vue CLI installation

Open the terminal and run the NPM install -g@vue /cli command to help install vue CLI globally.

After the installation is complete, run the vue-version command

Vue CLI creates a project

Now create a project called vue-demo-dands and enter the installation command: vue create vue-demo-dands.

If selected, Default ([Vue 2]...) If selected, Default (Vue 3...) , press the arrow, then Enter (select Manually... , which is not covered in this article.)Copy the code

Select Default ([Vue 2]…) And the Default (Vue 3…) , the engineering structure is the same, as shown in the figure below.

Note: main.js is a slightly different entry file. If you follow the online tutorial and find that the content of main.js is different from that of the online teacher, don’t worry.

If there is any mistake, please correct, discuss, improve, learn and make progress together