vue-cli3与vue3

看目录结构：

项目目录如下：(vue-cli3+版本创建的项目)

看见项目中没有config、build等文件夹，变理所当然的以为它是vue3项目，可是试用vue3语法，却报错，研究后了解到，项目的目录结构和vue版本没有关系，有关系的是vue-cli版本，以上版本即vue-cli3+版本创建的项目。
vue-cli2创建的项目目录如下：

---

vue-cli创建项目

vue-cli创建项目命令：

1.vue -V ：可查看当前vue-cli版本

2.vue create 项目名称 即可使用vue-cli创建项目，进入创建项目页面，可选择使用vue2还是vue3

3.选择相应vue2或vue3之后便可创建项目（我这里选的vue2）

等一会儿项目创建完成便可直接用编辑器打开运行：

如何区分项目是vue3还是vue2

最简单的方法就是在项目中实验一下vue3跟vue2不一样的语法，比如：
1.vue3中的template可以有多个根节点，vue2只能有一个；
2.main.js

//vue3
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

//vue2
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

3.setup（取代data 和methods)

// Vue3
export default {
  props: {
    abc: String
  },
  setup(props,context) {
   const count = ref(0)
   add(){
      return count.value ++
    }
  return {count,add}
  }
}

// Vue2
export default{
  props:{
    abc: String
  },
  data() {
    return {
      count: 0
    },
  }，
  methods:{
    add(){
      return this.count++
    }
  }
}

5.新组件 Teleport
to代表重新找的父节点，父节点不再是类名为parent的div

<div class="parent">
	<Teleport to="body">
	       <div class="box" style="position:absolte;z-index:10"></div>
	 </Teleport>
 </div>

等等…

---

总结：

vue项目看项目目录仅能确定vue-cli版本是2还是3+，跟是vue2还是vue3 没有关系。
写博客是为了记笔记！