Vue3基本环境及语法 配置 vue3 开发环境 // 安装或者升级 npm install -g @vue/cli yarn global add @vue/cli
// 全局升级vueCli npm update -g @vue/cli // 或者 yarn global upgrade --latest @vue/cli
// 保证 vue cli 版本在 4.5.0 以上 vue --version
// 创建项目 vue create my-project
// 或者使用图形化界面创建 vue ui
CSS预处理器推荐 推荐使用dart-sass,(深受node-sass的毒害)。这也是官方所推荐的
有关命令行的步骤。主要是一些配置,大家可以参考一些平常自己的使用。个人推荐Vue ui创建。可能是好看吧
template的变化 在Vue2中,每个template节点只能有一个根节点。
而在Vue3中,可以有多个根节点
举例说明
//vue2
// vue3
新增语法 setUp 这个就是代替了原来的data函数,可以接收两个参数,props,context(没有用到的时候可以省略不写)。且只执行一次
示例代码
这就是一个基本的setup的过程,可能大家在这里还看不出来,和Vue2具体有哪些区别,别急。可以试着点击一下button按钮,发现num并没有发生改变。看一下控制台(F12),发现输出的是一个number的值。但是我们点击并没有发生改变。所以接下来,我们将用到第一个 新的API Ref