如何创建一个vue-cli3项目?

一、安装环境

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、手动选择、勾选需要的插件:

18.jpg

3、vue版本,我们自然是选择vue3

4、路由模式,我们选择 n(No)

5、一路回车,直到最后“是否导出本次的选择配置”:n

20.jpg

6、直到安装完成:

22.jpg

7、按顺序执行命令,即可正常启动项目:

PS D:\Study\vue> cd .\vue3-app\
PS D:\Study\vue\vue3-app> npm run serve

23.jpg


三、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

jiguiquan@163.com

文章作者信息...

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐