首先确保你安装了node.js

这是我自己的一个版本号

node   v14.15.1
vue -V  @vue/cli 4.5.10

npm i -g vue@next
//全局安装vue

npm install -g @vue/cli
npm install -g @vue/cli@4.5.10 //指定版本号安装
//vue cli安装，安装慢可以切换国内镜像

创建你的第一个vue项目

npm install yarn -g //初始化

vue create shop //创建项目名为shop

v- 的解释

<template>
  <p>{{ name }}</p>
  <p v-text="name"></p>   <!-- v-text 一般简写成 <p>{{ name }}</p> -->
  <p v-html="info"></p>   <!-- v-html 一般用于有带html表情的属性，例如 info:'<i>斜体字</i>'  -->
  <!-- v-bind:属性名 = "变量名" 绑定动态的标签属性 ，也可以简写成  :属性名 = "变量名" -->
  <p v-bind:id="dataval">有属性值，id=20</p>
  <p :id="dataval">有属性值</p>
  <!-- class类名绑定，可以叠加使用 -->
  <p class="text" :class="{'red':isred}">我是红色的</p>
  <!-- v-if -->
  <!-- v-show 隐藏样式，F12是可以看得到的-->
  <p v-if="isTrue">if语句展示</p>
  <p v-show="isFlase">show隐藏</p>

  <!-- v-for -->
  <ul>
    <li v-for="(item,index) in dataList" :key="index">
      姓名：{{item.username}}
      年龄：{{item.userage}}
    </li>
  </ul>

    <!-- v-on:属性名，可以直接写成@click = ""  -->
  <button @:click="handClike">点击</button>
<!--   @input="方法名" 输入事件，例如手机号，输入去验证是否符合规则
       @focus="方法名"  点击到文本框触发事件
       @blur="方法名"  离开文本框触发事件
       @change="方法名" 内容更改触发事件
-->
  <input type="text" placeholder="输入" v-model="username"
  @input="handInput"
  @focus="handFocus"
  @blur="handBlur"
  @change="handChange"
  >
</template>

生命周期函数

  //setup相当于vue2中的 beforecreate和create 
 setup(){
     // 数据渲染前
  onBeforeMount(()=>{
  })
  
  // 数据渲染后
  onMounted(()=>{
  })

  //dom页面更新还没同步之前
  onBeforeUpdate(()=>{
  })
  
  //dom页面更新同步之后
  onUpdated(()=>{
  })
 }
  

 <div id="nav">
    <!-- 相当于a 标签，to ="去你想要的页面" -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/test">test</router-link>
  </div>
  <!-- 展示上面点击之后的页面 -->
  <router-view/>