VUE3基础之初识

月亮慢慢圆
307 阅读4分钟

现在这个阶段，很多公司都开始用VUE3框架了，所以我们也要对VUE3有个了解。

VUE3相比VUE2的提升

这里只是一些概念性的问题，可以了解，但是没必要在意。

性能的提升

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

源码的升级

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

拥抱TypeScripe

  • 更好的支持TypeScripe。

新的特性

  • Composition API (组合API)。

    • setup
    • ref 和 reactive
    • computed和watch
    • ......

  • 新的内置组件

    • Fragment
    • Teleport
    • Suspense

  • 其他改变

    • 新的生命周期钩子
    • data选项应始终被声明为未一个函数
    • 移除keyCode支持作为v-on的修饰符
    • ......

创建VUE3的方式

基于vue-cli创建

vue-cli是通过webpack去创建VUE项目。

先认识一些命令行：

vue -V  // 查看@vue/cli版本，需要@vue/cli版本在4.5.0以上

npm i -g @vue/cli  // 安装或者更新@vue/cli版本

vue create vue_name  // 创建vue项目

输入创建项目的命令行以后选择VUE3去创建：

1742990124259.png

后面就是一步一步的去选择配置就好了。

基于vite创建

vite是新一代前端构建工具，vite的优势如下：

  • 轻量快速的热重载（HMR），能实现急速的服务启动。
  • 对TypeScript，JSX（JS和结构混着写的语法，react用到），CSS等支持开箱即用。
  • 真正的按需编译，不再等待整个应用编译完成。
  • webpack构建和vite构建对比图如下：

1742991017626.png

先看webpack构建流程，先从entry入口（不了解的以后我还会写一个关于webpack的帖子）进去，然后分析所有的route路由，再分析路由下的module模块，如果路由很多就会特别耗时，分析完以后会进行一个Bundle处理，然后Server ready工程启动。

然后看vite构建流程，它一上来就是Server ready工程启动，然后会根据你想看什么路由，再去分析这个路由和相应的模块组件，这也就是所说的真正的按需编译。

具体操作如下：

npm create vue@latest // 这一指令将会安装并执行create-vue，它是 Vue 官方的项目脚手架工具。NODE版本要高。

// 接下来就是各种的配置

1742992000445.png

这样就创建好一个VUE3项目了。

VUE3目录结构

我们创建好VUE3项目以后，可以先看一下它的目录结构，并且了解一下各个文件都是干嘛用的。

这就是VUE3的目录结构：

image.png

  • .vscode下的extensions.json: 配置插件的，如果你的vscode一个插件都没有安装的话会提示你推荐安装的插件。
  • public：脚手架的根目录，里面只有一个icon文件，就是页面标签的图标。
  • src：不用想，前端所编写的代码。
  • .gitignore：git的忽略文件。
  • env.d.ts：是帮助ts语言能够识别.jpg，.txt等文件的。为什么爆红是因为没有下载依赖，等下载完依赖有了node_modules文件夹以后就不会爆红了，下载完以后最好重新打开vscode。

image.png

  • index.html：入口文件。这点和webpack不同，webpack的入口文件是main.js，而vite是index.html，如果我们把里面的代码注释掉，重新写一个简单的html文件，那么打开这个项目就只是一个简单的html页面。

1742995150002.png

打开以后就是简单的html页面。

1742995205040.png

原来的页面是这个样子：

1742995309814.png

我们看原来的代码：

1742995384926.png

它引入了/src/main.ts文件，这就相当于我们用Vue2的时候的入口文件main.js。

image.png

我们可以看到很多爆红，内容是这样的：

image.png

找了很多答案都没什么用，最后在网上找到一个有用的解决方案：

将env.d.ts文件的代码改为下面：

/// <reference types="vite/client" />

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

// 环境变量 TypeScript的智能提示
interface ImportMetaEnv {
  VITE_APP_TITLE: string;
  VITE_APP_PORT: string;
  VITE_APP_BASE_API: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

将tsconfig.json文件代码改为下面：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "useDefineForClassFields": true,
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "baseUrl": "./",
    "paths": {
      "@": [
        "src"
      ],
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "*.ts"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

这样一来main.ts就不会爆红了，具体原因现在不清楚，以后再来讨论。

  • tsconfig.json，tsconfig.app.json，tsconfig.node.json：就是ts的一些配置文件，具体情况以后再讲。

  • main.ts：入口文件index.html引入的配置文件，里面创建了VUE应用，且定义了根组件等一些列事情，并且把创建好的VUE应用挂载到容器里。

import './assets/main.css'  // 就是一些样式

import { createApp } from 'vue'  // createApp用来创建VUE应用的
import App from './App.vue'  // 这是VUE应用的根组件
import router from './router'

const app = createApp(App)  // 创建一个名字叫app的VUE应用且根组件为App

app.use(router)  // VUE应用使用router插件

app.mount('#app')  // 将VUE应用挂在到一个id为app的容器里，这个容器就在前面说的入口文件index.html里
avatar
文章
阅读
粉丝