Vue3.0的介绍以及多种方式创建Vue3.0项目并分析结构

小就是我
389 阅读7分钟

我正在参加「掘金·启航计划」

Vue3.0简介

Vue3带来了什么

1.性能的提升

  • 打包大小减少41%
  • 初次渲染快55%, 更新渲染快133%
  • 内存减少54%

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式
  • 重写虚拟DOM的实现和Tree-Shaking

3.拥抱TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  1. Composition API（组合API）

    1. setup配置
    2. ref与reactive
    3. watch与watchEffect
    4. provide与inject
    5. ......

  2. 新的内置组件

    1. Fragment
    2. Teleport
    3. Suspense

  3. 其他改变

    1. 新的生命周期钩子

    2. data 选项应始终被声明为一个函数

    3. 移除keyCode支持作为 v-on 的修饰符

    4. ......

创建vue3.0项目

创建vue3.0项目有两种方式，最传统的还是cli脚手架创建，还有就是使用vite创建，下面一一演示，先从脚手架开始

推荐使用cli脚手架的方式而不是vite,因为目前主流的还是cli，vite并没有流行开

方式1：使用vue-cli脚手架创建

官方文档：cli.vuejs.org/zh/guide/cr…

首先需要确保vue-cli的版本在4.5.0以上！

查看vue-cli版本

想要查看vue-cli版本有两种方式，都是使用命令：

方式1 vue -V

打开命令窗口输入：vue -V

方式2 vue --version

打开命令窗口输入：vue --version

升级vue-cli版本

如果发现你的vue-cli脚手架版本低于4.5.0，那么就不能通过它创建vue3.0项目了，这个时候需要升级你的vue-cli脚手架版本，可以使用以下这个命令，它会帮助你安装最新的vue-cli版本

## 安装或者升级你的@vue/cli
npm install -g @vue/cli

创建项目

确认完自己的vue-cli脚手架版本后就可以开始创建项目了

进入想要创建的目录

首先进入想要创建的目录

可以选择使用cd命令切换目录，也可以直接在目录输入输入cmd然后回车，我是选择的后者

输入命令

输入命令并回车： 注意：xxx就是项目名称

vue create xxx

这是我的项目名称叫vue3_test

然后按下回车，就开始创建项目了，需要等待一小会，这里我大约等了30s

注意：这个阶段可能会失败，失败原因可能是：网络问题，没有淘宝镜像等问题,出现问题不要着急，根据报错信息去搜索解决，总会解决问题的。

如果出现以下画面表示这一步成功了

选择vue3.0版本

因为我们要创建vue3.0版本，所以选择vue3.0选项并回车，然后就等待项目构建即可

注意：这一步别选错了，很有可以不小心选到vue2.0版本

大约等待1分钟左右，即可构建项目完成，如果卡住了，敲下回车即可

出现以下界面表示成功了。并且提供给我们两个命令：进入项目，启动项目

启动vue3.0项目

依次输入这两个命令即可：

首先是切换到项目目录，然后是启动项目

cd vue3_test
npm run serve

出现以下界面表示项目启动成功

访问vue3.0项目

打开浏览器输入：http://localhost:8080/

这就是vue3.0提供给我们的界面，和vue2.0长的一模一样的

通过开发者工具发现也是提供了一个HelloWorld的组件

cli脚手架创建项目步骤总结

其实就是这几个命令：

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

至此使用vue-cli创建vue3.0项目到此就结束了，下面演示用vite创建

方式2：使用vite创建

注意：虽然也使用vite创建，但是并不推荐，因为它目前并不是主流，了解这种方式即可

那么既然要用到vite，那什么是vite呢？

vite简介

vite是由尤玉溪团队打造的新一代前端构建工具。扩展：现在的主流构建工具是webpack

  • 优势如下：

    • 开发环境中，无需打包操作，可快速的冷启动。
    • 轻量快速的热重载（HMR）。
    • 真正的按需编译，不再等待整个应用编译完成。

传统构建和vite构建的对比图：

首先是传统构建webpack的工作模式：构建的比较慢，要打包多个文件

然后是vite的工作模式：构建的比较快，动态打包

官方文档：v3.cn.vuejs.org/guide/insta…

vite官网：vitejs.cn

创建项目

进入想要创建的目录

这一步和使用vue-cli创建的第一步如出一辙，就不废话了，直接跳过

执行命令 npm inie vite xxx

输入命令：npm inie vite xxx并按下回车

注意：前三个单词都是固定的，xxx是项目名称

npm inie vite xxxx

输入并按下回车

如果是第一次使用vite创建，这里可能会咨询是否要创建项目，输入y(yes)

切换到项目目录

输入命令切换到项目目录

cd xxxxx

启动vue3.0项目

切换到项目目录后，就可以启动项目了，这里不再是npm run serve了，而是npm run dev

但是按下回车后发现启动失败了

这个问题是因为没有执行npm i下载相关的依赖，执行npm i再执行npm run dev即可，相关问题以记录到csdn:

访问vue3.0项目

打开控制台，输入：http://localhost:3000/

和vue2.0的界面比起来，清爽了很多，并且给我们提供了一个计数器的demo

本质还是一个HelloWorld的组件

vite创建项目步骤总结

以下为命令步骤总结：千万不要忘了npm i这一步！

## 创建工程
 <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm i
## 运行
npm run dev

  • 总结和对比

  •   既然两种方式都可以创建vue3.0项目，但是推荐使用cli创建vue3.0项目，vite目前并不是主流，作为拓展了解即可，实际还是要看以公司为主
  •   下面简单对比cli和vite，主要有以下不同：
  •   1 创建的命令不同
  •   cli使用的命令是npm create xxx,vite使用的命令是npm init vite-app xxx
  •   2 对项目的依赖管理不同
  •   cli不需要收到下载依赖，vite需要开发者收到通过npm i命令下载依赖
  •   3 项目端口不同
  •   cli默认是8080，vite默认是3000
  •   4 初始化页面展示不同
  •   cli的页面和vue2.0几乎一致，但是vite展示的页面更加清爽，且提供了一个计数器的demo

分析vue3.0初始化工程结构

以下就是整个初始化完成后的vue3.0工程结构，基本和vue2.0是一致的，每一个包的位置包括命名都和vue2.0十分的相似

唯一不同的就是main.js里面的代码

main.js

如果在vue3中写vue2的main.js那一套，肯定是不行的，不能兼容老版本的写法的

组件模板结构根标签的使用

还有一个重要的地方，vue2.0中必须要使用根标签包裹组件模板内容,但是vue3不需要根标签

如果给vue3加了根标签也不会报错

除了上面两个地方之外，vue3.0初始化工程结构和vue2.0是一样的

├── node_modules 
        ├── public
        │   ├── favicon.ico: 页签图标
        │   └── index.html: 主页面
        ├── src
        │   ├── assets: 存放静态资源
        │   │   └── logo.png
        │   │── component: 存放组件
        │   │   └── HelloWorld.vue
        │   │── App.vue: 汇总所有组件
        │   │── main.js: 入口文件
        ├── .gitignore: git版本管制忽略的配置
        ├── babel.config.js: babel的配置文件
        ├── package.json: 应用包配置文件 
        ├── README.md: 应用描述文件
        ├── package-lock.json：包版本控制文件
avatar
文章
阅读
粉丝