一、安装环境
1、默认我们已经安装了符合版本的node和npm,cnpm了;
2、安装最新版的 vue-cli3
关于旧版本
Vue CLI 的包名称由
vue-cli
改成了@vue/cli
。 如果你已经全局安装了旧版本的vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。
cnpm install –g @vue/cli //卸载就是: npm uninstall -g @vue/cli
安装指定版本的 @vue/cli
cnpm install -g @vue/cli@4.5.11 vue -V @vue/cli 4.5.11
二、正式创建项目
1、使用以下命令创建一个vue3项目:
PS D:\Study\vue> vue create vue3-app
以下是界面选择操作:
2、手动选择、勾选需要的插件:
3、vue版本,我们自然是选择vue3
4、路由模式,我们选择 n(No)
5、一路回车,直到最后“是否导出本次的选择配置”:n
6、直到安装完成:
7、按顺序执行命令,即可正常启动项目:
PS D:\Study\vue> cd .\vue3-app\ PS D:\Study\vue\vue3-app> npm run serve
三、Vue3与Vue2的生命周期函数对比:
生命 | Vue2 | Vue3 |
准备被创建 | beforeCreate | setup |
创建 | created | setup |
挂载前 | beforeMount | onBeforeMount |
挂载 | mounted | onMounted |
更新前 | beforeUpdate | onBeforeUpdate |
更新 | updated | onUpdated |
准备销毁——>准备卸载 | beforeDestroyed | onBeforeUnmounted |
销毁——>卸载 | destroyed | onUnmounted |
激活<keep-alive>组件 | activated | onActivated |
停用<keep-alive>组件 | deactivated | onDeactivated |
捕获一个来自子孙组件的错误时被调用 | errorCaptured | onErrorCaptured |
检查依赖被追踪,当render函数被调用时,会检查哪个响应式数据被收集依赖 | —— | onRenderTracked |
当执行update操作时,会检查哪个响应式数据导致组件重新渲染 | —— | onRenderTriggered |