Vue3 --- 环境搭建

0. 概述

1. Vue3 带来了什么

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

2. 源码的升级

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

3. 拥抱TypeScript

Vue3 可以更好的支持TypeScript

4. 新的特性

Composition API (组合API)
1. setup配置
2. ref与reactive
3. watch与watchEffet
4. provide与inject
新的内置组件爱你
1. Fragment
2. Teleport
3. Suspense
其他改变
1. 新的生命周期钩子
2. data 配置项应始终被声明为一个函数
3. 移除keyCode支持作为 v-on的修饰符

1. 创建Vue3 工程

1. 使用 vue-cli 创建

# 查看@vue/cli 版本,确保@vue/cli版本在4.5.0以上
vue --version

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

# 创建项目
vue create 项目名

# 启动项目
cd 项目根目录
npm run serve

2. 使用 vite 创建 ( 推荐 )

1. 官方文档

# vite官方文档
https://vitejs.cn/

2. 什么是vite

新一代的前端构建工具

优势如下:

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

传统构建与 vite 构建对比图

webpack的工作模式: 入口文件,分析路由,分析模块,然后进行打包,打包完成后服务器准备好了

vite的工作模式: 一上来服务器就准备好了,当发起http请求时再分析路由,模块,渲染

3. 创建工程

# 1. 创建项目命令
npm create vue@latest

# 2. 具体配置
## 1. 配置项目名称
Project name: vue3_test
## 2. 是否添加 TS 支持
✔ Add TypeScript? Yes
## 3. 是否添加 JSX 支持
✔ Add JSX Support? No
## 4. 是否添加路由环境
✔ Add Vue Router for Single Page Application development? No
## 5. 是否添加pinia环境
✔ Add Pinia for state management? No
## 6. 是否添加单元测试
✔ Add Vitest for Unit testing? No
## 7. 是否添加端到端测试方案
✔ Add an End-to-End Testing Solution? … No
## 8. 是否添加 ESLint 语法检查
✔ Add ESLint for code quality? Yes
## 9. 是否添加 Prettiert 代码格式化
✔ Add Prettier for code formatting? No
## 10. 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段)
✔ Add Vue DevTools 7 extension for debugging? (experimental) No
## 11. 进入项目目录
cd vue3_test
## 12. 下载相关依赖
npm install
## 13. 运行在开发环境
npm run dev

1.3 IDE 插件下载

1. Vue-Official

2. 项目结构

1. src

工程目录文件夹

1. main.ts

import './assets/main.css'  // 引入样式文件
import { createApp } from 'vue' // 引入的不再是Vue的构造函数了 引入的是一个名为 createApp 的工厂函数,无需通过new关键字构建
import App from './App.vue'   // Vue 的根组件

// 创建应用实例对象,类似于之前的vm, 但app比vm更轻量, #app 是 index.html 中的节点
createApp(App).mount('#app')

App.vue

<template>
  <!-- Vue3中不需要最外层必须有个根标签了 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
</style>

2. env.d.ts

让 ts 有识别 .txt .jpg 文件的能力

3. index.html

入口文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

4. package-lock.json package.json

包的管理文件

5. tsconfig.app.json tsconfig.json tsconfig.node.json

ts的配置文件

6. vite.config.js

整个工程的配置文件

posted @ 2024-08-08 17:20 河图s 阅读(75) 评论(0) 收藏举报

刷新页面返回顶部

河图