您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Vue3

1.目前已支持 vue3 的UI组件库

  • ant-design-vue
    https://antdv.com/docs/vue/introduce-cn/

    ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步

    目前支持 Vue 3.0 的 2.0.0 测试版 已发布

  • element-plus
    https://element-plus.gitee.io/#/zh-CN

Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

  • vant
    https://vant-contrib.gitee.io/vant/v3/#/zh-CN

轻量、可靠的移动端 Vue 组件库

Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间

目前 Vant 已完成了对 Vue 3.0 的适配工作,并发布了 Vant 3.0 版本

  • VueUse
    https://vueuse.org/

基于composition组合api的常用集合,小兔仙项目会部分使用

2. Vue3带来的新变化

2.1性能提升

  • 首次渲染更快
  • diff算法更快
  • 内存占用更少
  • 打包体积变小

2.2 更好的Typescript支持

2.3 Composition API

在使用vue2.x版本开发较复杂的组件时,逻辑难以复用,组合式api的出现可以解决此类问题

相关阅读:

  1. Vue3 中文文档 https://vue3js.cn/docs/zh/
  2. Vue3 设计理念 https://vue3js.cn/vue-composition/

3. 破坏性语法更新

  • vue3.0对于2.0版本的大部分语法都是可以兼容的,但是也有一些破坏性的语法更新,这个大家要格外注意
  1. 实例方法$on移除 (eventBus现有实现模式不再支持 可以使用三方插件替代)
  2. 过滤器filter移除 (插值表达式里不能再使用过滤器 可以使用methods替代)
  3. .sync语法移除 (和v-model语法合并)

更多阅读:
https://v3.cn.vuejs.org/guide/migration/introduction.html

4. Vue3开发环境搭建

4.1 创建脚手架命令

vue create xxxxx(项目名)

4.2选择自定义配置

在这里插入图片描述

4.3 选中自定义安装版本

在这里插入图片描述

4.4 选择3.x版本

在这里插入图片描述
后面的点回车就可以了,vue-cli会帮助我们跑起来一个内置了vue3版本的vue项目

5. Vue3一些文件的变化

  • 首先我们可以看一下package.json文件,在dependencies配置项中显示,我们当前使用的版本为3.0.0
"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
}
  • 然后打开main.js入口文件,发现Vue的实例化发生了一些变化,由先前的new关键词实例化,转变为createApp方法的调用形式 (更多详情:https://www.bilibili.com/read/cv10133036)

vue2.x

new Vue({
  el: '#app',
  render: h => h(App)
})

vue3.x

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
  • 最后我们打开一个单文件组件发现,vue3.0的单文件组件中不再强制要求必须有唯一根元素
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进