一、安装
1.vite：尤大开发，未来取代webpack的方案，原理就是利用浏览器现在已经支持es6的import了，碰见import会发送一个http请求去加载文件，vite拦截这些请求，做一些预编译（极力推荐，真正秒开，真男人都用它），具体使用方法请参考，vite使用
create-vite-app vue3-vite
cd vue3-vite
npm install
npm run dev
2.捡现成的
git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
cd vue3-webpack
npm install
npm run dev
3.vue-cil（记得升级最新版本哦）
npm install -g @vue/cli
vue create 01-vue3-cli
cd vue3-cli
vue add vue-next
npm run serve
二、使用
初步写了一个小demo，用于熟悉新语法，后面会补全和详细介绍。
<template>
<h1>Hello Vue 3!</h1>
<button @click="inc">Clicked {{ count }} times.</button>
<h2>对象的双向绑定，{{person.age}}</h2>
<button @click="add">点击增加年龄</button>
</template>
<script>
import { ref, watchEffect,reactive} from 'vue'
export default {
//setup为Composition API的入口，具体的后面会说
setup() {
//reactive可以创建一个响应式的对象，用于监听复杂类型（对象或数组）的变化
const person=reactive({age:18})
const add=function(){
person.age++
}
//ref可以创建一个响应式的对象，访问这个对象时要使用.value的形式进行访问，而非以前的this.
//ref本质就是对reactive的封装，如ref(xx)=>reactive({value:xx})
const count = ref(0)
const count1 = ref(0)
const inc = () => {
count.value++
}
//需要向外界暴露的属性或者方法,只有这里return了模板中才能使用
return {
count,
inc,
add,
person
}
},
}
</script>
<style scoped>
img {
width: 200px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
三、新增特性，见下面链接
1.vue3中的Composition API
