VUE3.0学习系列随笔(一):VUE3.0项目初始化

VUE3.0学习系列随笔(一):VUE3.0项目初始化

1、VUE3.0简介

VUE3.0相对于VUE2.0的提升主要有以下几点:

  • Performance:性能更比Vue 2.0强。
  • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。
  • Composition API:组合API Fragment, Teleport,
  • Suspense:“碎片”,Teleport即Protal传送门,“悬念”
  • Better TypeScript support:更优秀的Ts支持
  • Custom Renderer API:暴露了自定义渲染API

2、安装vue-cli3

如果安装过vue-cli2.0或者vue-cli1.0,需要先行卸载vue-cli,然后在安装vue-cli3,卸载命令为:

npm uninstall vue-cli -g

VUE3.0所对应的vue-cli安装命令和vue2.0存在差异:

npm install -g @vue/cli

安装过程截图:
在这里插入图片描述
安装完成截图:
在这里插入图片描述

注意:安装过程中如果出现错误,或者安装失败,可以重新执行安装命令。

3、初始化VUE3.0项目

VUE3.0项目初始化和VUE2.0存在差异,拥有两种初始化方式:

1、图形化界面:vue ui
2、命令行界面:vue create 项目名称

(1)图形化界面

(a)打开图形化界面

选择VUE3.0项目创建根目录运行cmd,执行图形化界面命令,即可打开VUE项目创建界面
在这里插入图片描述

界面如下图所示:
在这里插入图片描述

(b)创建项目

点击创建,会以当前目录为项目根目录
在这里插入图片描述
点击在此创建新项目

(c)配置项目详情

主要是配置项目名称、包管理器和git管理,配置完成之后点击下一步
在这里插入图片描述

(d)配置项目预设包

如果是第一次配置预设包,建议选择手动配置项目,即Manual模式,手动模式可以添加额外的包
在这里插入图片描述

手动添加的包为:Router(路由管理)和VUEX(状态管理)
在这里插入图片描述

(e)VUE项目其他配置

配置VUE项目的版本、路由模式和代码规范检查
在这里插入图片描述
配置完成后,点击创建项目,保存新的项目预设模式。
在这里插入图片描述
选择之后,开始进入项目创建阶段,这个地方需要等待几分钟。
在这里插入图片描述
同时,命令行界面开始执行创建项目的流程
在这里插入图片描述

(f)项目创建成功,自动进入项目管理页面

命令行界面:
在这里插入图片描述
ui界面:
在这里插入图片描述
此时,使用图形化界面整个VUE3.0项目创建流程完毕。

包含router路由的VUE3.0项目工程下载地址为:https://download.csdn.net/download/qq_26666947/14909263

(2)命令行界面

选择项目保存位置,执行创建vue3.0命令:

vue create 项目名称

回车,选择创建项目预设模式,这里选择VUE3默认模式
在这里插入图片描述
点击回车,等待项目加载,项目加载成功则为以下界面:
在这里插入图片描述
运行项目,按照蓝字提示,进入VUE3.0项目界面,运行项目,项目运行成功会显示运行端口
在这里插入图片描述
在浏览器中访问项目:
在这里插入图片描述
脚手架搭建的前端初始工程下载地址为:https://download.csdn.net/download/qq_26666947/14909223

猜你喜欢

转载自blog.csdn.net/qq_26666947/article/details/112867757