vue3介绍&Vite创建工程

发表于 分类于 ， 阅读次数： Waline： 本文字数： 3.4k 阅读时长 ≈ 3 分钟

Vue3简介

性能的提升

  • 打包大小减少41%。

  • 初次渲染快55%, 更新渲染快133%。

  • 内存减少54%。

源码的升级

  • 使用Proxy代替defineProperty实现响应式。

  • 重写虚拟DOM的实现和Tree-Shaking。

拥抱TypeScript

  • Vue3可以更好的支持TypeScript。

新的特性

  1. Composition API（组合API）：

    • setup

    • ref与reactive

    • computed与watch

      ……

  2. 新的内置组件：

    • Fragment

    • Teleport

    • Suspense

      ……

  3. 其他改变：

    • 新的生命周期钩子

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

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

      ……

创建Vue3工程

基于 vue-cli 创建

点击查看官方文档

备注：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

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

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve

基于 vite 创建 (推荐)

vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

  • 轻量快速的热重载（HMR），能实现极速的服务启动。
  • 对 TypeScript、JSX、CSS 等支持开箱即用。
  • 真正的按需编译，不再等待整个应用编译完成。
  • webpack构建 与 vite构建对比图如下：
    webpack是处理完所有模块才启动工程，而vite是直接启动，后续按需加载(比较像懒加载)

webpack构建 vite构建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称 // 不能出现中文和特殊字符，最好用 纯小写字母+数字+下划线
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No
  • 项目文件
    一开始打开项目文件，会有很多文件报红，这是因为项目文件找不到依赖，可以发现我们没有node_modules文件夹，我们需要npm i安装所有的依赖，再重新打开项目文件，就好了

    • .vscode/extensions.json：配置了插件，如果vscode一个插件都没安装，会给你一个提示

    • public：脚手架的根目录，只放了一个页签图标favicon.ico，就是网页标签的图标

    • env.d.ts: /// <reference types="vite/client" />
      ts不认识.jpg、.txt等文件，这个文件的作用就是让ts去认识这些文件

      比如，如果删掉这行代码，在a.ts文件中引入一个txt：import b from './b.txt'，会发现ts不认识
      ctrl点进这个vite/client，这个文件中，常用的文件都配在这里了，包括各种图片视频图标等等

    • index.html：入口文件
      它引入了src/main.ts，它支撑着整个应用跑起来

      这点vite和webpack就有区别了，入口文件不是main.js，也不是mian.ts

    • 运行；npm run dev

自己动手编写一个App组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="app">
    <h1>你好啊！</h1>
  </div>
</template>

<script lang="ts">
  export default {
    name:'App' //组件名
  }
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

安装官方推荐的vscode插件：

volar ts-volar

TS版本的volar现在已经启用，而是新的vue-offical将volar 和 TS volar两个插件的功能集合到了一起，但是好像目前很垃圾，评价很差

总结：

  • Vite 项目中，index.html 是项目的入口文件，在项目最外层。
  • 加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
  • Vue3中是通过createApp 函数创建一个应用实例。

一个简单的效果

Vue3向下兼容Vue2语法，且Vue3中的模板中可以没有根标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'App',
    data() {
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    methods:{
      changeName(){
        this.name = 'zhang-san'
      },
      changeAge(){
        this.age += 1
      },
      showTel(){
        alert(this.tel)
      }
    },
  }
</script>

这种写法就是vue2的选项式API(也叫配置式)，name、data、methods就是一个选项，或者说一个配置项。
这些东西写多了，就会出现一些问题，官网有明确的说明，这里在下一篇文章通过动态图作说明→