一、初始化结构目录不一样
（1）3.0版本需要在项目根目录下手动创建不同环境的配置文件，具体的环境变量名称由package.json中运行参数决定
（2）3.0版本中不同环境的webpack配置文件也没有了（webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js）可以再根目录中创建vue.config.js文件来进行webpack和vue的一些配置
二、npm命令
2.0
npm install vue-cli -g
3.0
npm install @vue/cli -g
三、vue3.0 setUp()函数
<template>
<router-link to="/about">点这里去关于我们页面</router-link>
<div class="home">
这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
<button @click="countAdd">{{btnText}}</button>
</div>
</template>
<script>
// ref 是 vue 3.0 的一个重大变化，其作用为创建响应式的值
import { ref } from 'vue'
// 导出依然是个对象，不过对象中只有一个 setup 函数
export default {
setup () {
// 定义一个不需要改变的数据
const btnText = '点这个按钮上面的数字会变'
// 定义一个 count 的响应式数据，并赋值为 0
const count = ref(0)
// 定义一个函数，修改 count 的值。
const countAdd = () => {
count.value++
}
// 直接 导出一些内容给上面的模板区域使用
return {
btnText,
count,
countAdd
}
}
}
</script>
在vue3.0中首先，我们的组件不用写一堆东西了，只需要一个 setup 函数即可。这样做得好处就是，我们可以把很多零碎的东西拆成公共组件，然后交给其他组件去调用。
其次，在 setup 函数中 return 出去的东西，可以在模板区域直接使用，也不必理会 this了。
然后就是 ref 这个函数，我们可以从 vue 中引入它，它传入一个值作为参数，返回一个基于该值的 响应式 Ref 对象，该对象中的值一旦被改变和访问，都会被跟踪到，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值。 。
四、生命周期区别
computed 计算属性和生命周期一样，都是从 vue 中导出引入的。我们把计算属性当成一个函数来使用，直接 return 计算结果即可。
五、目录结构对比
Vue2.0 main.js
Vue3.0 main.js
