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
}
})