Vue 前端小白了解并运用Vue3 + Vite 及 Vue-cli 4项目搭建

Vue 3.0 概述

更新更快更强！

Vue.js 3.0 给我们带来了那些新特性呢：

• Performance：性能比 vue2.x 块 1.2 ～ 2 倍
• Tree shaking support：支持按需编译，体积更小
• Composition API：组合 API，类似 React Hooks
• Custom Renderer API：暴露了自定义渲染 API
• Fragment，Teleport（Protal），Suspense：新增三个组件
• Better TypeScript support：更好的支持 TS

Vue-CLI 4 概述

让开发更简单！

Vue-CLI 4 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。

• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vite 概述

让项目更快！

Vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：

• 快速的冷启动，不需要等待打包操作；
• 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
• 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

安装相应工具

1、更新 npm 到最新版本
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)

命令运行

npm install -g npm

npm 就自动为我们更新到最新版本
 
更新完成之后，以管理员身份打开 cmd 管理工具，输入 node -v ，回车，可查看 node 版本号.

2、安装全局 Vue-CLI4.x 脚手架
首先查看我们当前 Vue CLI 版本号，在命令行输入

vue -V

如果出现2.X.X，则说明我们现在安装的 Vue-CLI2；
然后我们就需要更新升级了，命令行输入以下命令，回车；

npm install -g @vue/cli

再次查看 Vue-CLI 的版本号4.x.x，则说明更新成功；

3、安装全局 Vue 3.x

命令运行

$ npm install vue@next

Vue3 + Vue CLI 4 搭建项目

1、通过 Vue-CLI4 创建一个 vue 项目
进入你需要创建项目的文件夹，打开命令行。

输入以下命令，回车

 vue create vue3