vue3 入门

vue3

Vue是一套用于构建用户界面的渐进式框架。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。目前最新版本是Vue3.x。

• Vue3 支持 vue2 的大多数特性
• 更好的支持 Typescript

性能提升

• 打包大小减少 41%
• 初次渲染快 55%, 更新渲染快 133%
• 内存减少 54%
• 使用 Proxy 代替 defineProperty 实现数据响应式
• 重写虚拟 DOM 的实现和 Tree-Shaking
• 编译模板的优化
• 更高效的组件初始化
• undate性能提高1.3~2倍
• SSR速度提高了2~3倍

创建vue3项目

1)使用vue-cli创建

不知道自己是否安装过,查看版本号,要求vue cli 版本在4.5.0以上

vue -V    //查看版本号

安装

npm install -g @vue/cli

创建项目

vue create vue3(项目名称)

创建项目的步骤图

往后一路回车就好了

启动服务器(在项目里面)

npm run dev

文件介绍

• node_modules: 项目的依赖库

• public: 公共目录项目开发环境不参与打包构建

• src 文件夹：我们主要操作的地方，组件的增加修改等都在这个文件夹里操作

  components

  ​ app.vue 组件

  ​ main.ts 程序的入口文件

• eslintrc.js: 配置 eslint 的检测规则，强制按照规则书写代码；

• gitignore: 指定 git 忽略的文件，所有 git 操作均不会对其生效；

• babel.config.js：关于babel的相关配置

• package-lock.json: 当 node_modules 或 package.json 发生变化时自动生成的文件。

• package.json: 指定项目开发和生成环境中需要使用的依赖库；

• tsconfig.js: 关于typescript的相关配置

如果app.vue文件有红色波浪线

解决方案

vscode打开 文件–>首选项–>设置

搜索 eslint

把Vetur>Vaildation:Template对钩去掉

源码分析

main.ts

// 引入createApp函数，创建对应的应用，产生应用的示实例对象
import { createApp } from 'vue'
// 引入App组件（所有组件的父级组件）
import App from './App.vue'
// 创建App引用返回对应的实例对象，调用mount方法进行挂在
createApp(App).mount('#app')

app.vue

<template>
<!-- vue2中的html模板中必须要有一对根标签，vue3组件中的html模板中可以没有根标签 -->
  < img alt="Vue logo" src="./assets/logo.png">
  <!-- 使用这个子级组件 -->
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
// 这里可以写ts的代码
// defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象
import {
      defineComponent } from 'vue';
// 引入一个子级组件
import HelloWorld from './components/HelloWorld.vue';
// 暴露出去一个定义好的组件
export default defineComponent({
     
  // 当前组件的名字是App
  name: 'App',
  components: {
     
    // 注册一个子组件
    HelloWorld
  }
});
</script>
<style>