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-cli

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）打开图形化界面

在vue-cli脚手架的根目录运行cmd，执行图形化界面命令，即可打开VUE项目创建界面

界面如下图所示：

（b）创建项目

选择新建文件夹

创建成功为：

点击在此创建新项目

（c）配置项目详情

主要是配置项目名称、包管理器和git管理，配置完成之后点击下一步

（d）配置项目预设包

这里我选择手动配置项目，手动模式是在预设模板中添加额外的包

手动添加的包为：Router（路由管理）和VUEX（状态管理）

（e）VUE项目其他配置

配置VUE项目的版本、路由模式和代码规范检查

配置完成后，点击创建项目，保存新的项目预设模式。

选择之后，开始进入项目创建阶段，这个地方需要等待几分钟。

（2）命令行界面